New to Leaflet. How can I add a play pause reload to turn on json mutlipolygons.

54 views
Skip to first unread message

beth

unread,
Jul 21, 2015, 11:28:18 AM7/21/15
to leafl...@googlegroups.com
I am very new to leaflet and programming in general.
I've set up a map that has a travelTimes_geojson.js that is overlaying in mutlipolygons on the map with click popups.

What I'd like to do next is to add a animation or timeline bar that has a play, pause, reload controls that will load all of my var s in the travelTimes_geojson.js and show the popupContent (or days and weeks of time that has past) as each is displayed. For example, user clicks play and then dayOne turns on and the animation or timeline bar shows the string "1 day" then dayTwo turns on and animation or timeline bar shows the string "2 day" and so on.

As I said, I am very new to all of this and I've been looking for a tutuorial, but cannot find anything that explains in detail how I'd go about this. Any and all assistance is greatly appreciate!

Beth



example var:

var weekFive = {
    "type": "Feature",
    "properties": {
        "popupContent": "5 weeks",
        "style": {
            weight: 2,
            color: "#999",
            opacity: 0.8,
            fillColor: "#769F5F",
            fillOpacity: 0.5
        }
    },
    "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
            [
                [
                    [ -90.094, 29.824 ], [ -90.103, 29.813 ], [ -90.111, 29.802 ], [ -90.12, 29.792 ], [ -90.128, 29.781 ], [ -90.136, 29.77 ], [ -90.144, 29.76 ], [ -90.152, 29.749 ], [ -90.16, 29.739 ], [ -90.168, 29.728 ], [ -90.175, 29.718 ], [ -90.183, 29.707 ], [ -90.191, 29.697 ], [ -90.198, 29.686 ], [ -90.205, 29.676 ], [ -90.213, 29.666 ], [ -90.22, 29.655 ], [ -90.227, 29.645 ], [ -90.234, 29.635 ], [ -90.241, 29.625 ], [ -90.248, 29.614 ], [ -90.254, 29.604 ], [ -90.261, 29.594 ], [ -90.268, 29.584 ], [ -90.274, 29.574 ], [ -90.28, 29.564 ], [ -90.287, 29.554 ], [ -90.293, 29.545 ], [ -90.299, 29.535 ], [ -90.305, 29.525 ], [ -90.311, 29.515 ], [ -90.317, 29.506 ], [ -90.323, 29.496 ], [ -90.329, 29.486 ], [ -90.334, 29.477 ], [ -90.34, 29.467 ], [ -90.345, 29.458 ], [ -90.351, 29.449 ], [ -90.356, 29.439 ], [ -90.361, 29.43 ], [ -90.367, 29.421 ], [ -90.372, 29.412 ], [ -90.377, 29.403 ], [ -90.382, 29.394 ], [ -90.387, 29.385 ], [ -90.391, 29.376 ], [ -90.396, 29.367 ], [ -90.401, 29.359 ], [ -90.405, 29.35 ], [ -90.414, 29.333 ], [ -90.414, 29.333 ],  [ -90.903, 29.057 ]
                ]
            ]
        ]
    }
    
};

My html is calling the data here:

var map = L.map('map', {
    zoom: 5,
    center: [36.505, -82.09],
    
});

map.setMaxBounds([
    [22.843102, -101.204367],
    [50.135038, -63.806440]
]);    

L.tileLayer('tiles/TravelTimes_base/{z}/{x}/{y}.png', {
  attribution: '© 2015 beth',
  minZoom: 4,
  maxZoom: 8
}).addTo(map);

L.control.scale().addTo(map);


function onEachFeature(feature, layer) {
var popupContent = "<p>It took " +
feature.properties.popupContent + " to travel this far from New York city in 1800</p>";

layer.bindPopup(popupContent);
}

L.geoJson([bicycleRental, dayOne, dayTwo, dayThree, dayFour, dayFive, daySix, weekOne, weekTwo, weekThree, weekFour, weekFive, weekSix], {

style: function (feature) {
return feature.properties && feature.properties.style;
},

onEachFeature: onEachFeature,

pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
Reply all
Reply to author
Forward
0 new messages