Get mapping with leaflet js
•Download as PPTX, PDF•
5 likes•1,384 views
A look at the massive amount of features available with the mapping framework Leaflet.js. We will go over the issues associated with mapping as well as some of the available technologies and how to get started.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Get mapping with leaflet js
Similar to Get mapping with leaflet js (20)
Recently uploaded
Recently uploaded (20)
Get mapping with leaflet js
- 1. Get Mapping! Google Maps & Leaflet.js By Scott Steinbeck
- 2. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 2 ABOUT ME • Scott Steinbeck • Entrepreneur • CF Engineer 10 Years • JavaScript Lover • Hardware/IOT Geek • Amateur Woodworker • Husband • Father
- 5. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 5 How it feels getting into mapping
- 6. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 6 ellipsoid conic projection cylindrical projection datum geographical coordinate system map projections map scale Mercator projection Orthophanic projection sinusoidal projection aspatial query decimal degrees Mapping Jargon
- 10. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 10 How does this work you may ask
- 11. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 11 and not all, projections are rectangles… In fact there are over 30+ different projections each of which try to provide accuracies in different areas such as navigation, physical size of land mass, shape, etc.
- 12. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 12 By this point most of you are probably like
- 13. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 13 Our big blue marble
- 14. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 14 Map Coordinate Formats NAD 27: (48.7440490722656, -122.466903686523) WGS 84: (48.7438798534299, -122.46818353793)
- 15. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 15 So when you mark your house…
- 16. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 16 …remember what projection you used
- 17. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 17 and by now your more like…
- 18. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 18 Creator of LeafletJS - Vladimir Agafonkin.
- 21. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 21 Leaflet is an open-source JavaScript library for interactive web maps. It's lightweight, simple, and flexible, and is probably the most popular open-source mapping library at the moment. Layers Out of the Box • Tile layers, WMS • Markers, Popups • Vector layers: • polylines • polygons • circles • rectangles • Image overlays • GeoJSON Vladimir Agafonkin.
- 24. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Tile Layers • Rendered Photos of a map at different zoom levels. JPG/PNG • Tile Images are described in X/Y/Zoom • Can be a Base Map, Street Layer Map(transparent), or just an overlay of polygons • Open Street Map • Google Maps • Bing • Esri • ThunderForest • MapQuest • MapBox • Stamen • CartoDB • Many others…. Or serve tiles from your server! https://leaflet-extras.github.io/leaflet-providers/preview/
- 28. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Plugins - we love plugins Bonne projection
- 42. www.agritrackingsystems.com AGRI TRACKING SYSTEMS KML http://geojson.io/ • XML markup • Easy to read • Option to add style information • Used primarily for Google Earth <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <Placemark> <name>First Baptist Church</name> <ExtendedData> <Data name="name"> <value>First Baptist Church</value> </Data> </ExtendedData> <Polygon> <outerBoundaryIs> <LinearRing> <coordinates> -93.27848017215729,44.974851451037914 -93.27820658683777,44.97450991073643 -93.27754139900208,44.97479073291075 -93.27737510204315,44.975010835815795 -93.2776540517807,44.97512088695153 -93.27778816223145,44.97495011785742 -93.27784717082976,44.97497288709934 -93.27788472175598,44.97494632298287 -93.27806711196898,44.97503360503364 -93.27848017215729,44.974851451037914 </coordinates> </LinearRing> </outerBoundaryIs> </Polygon> </Placemark> </Document> </kml>
- 43. www.agritrackingsystems.com AGRI TRACKING SYSTEMS GeoJSON { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "name": "First Baptist Church" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -93.27848017215729, 44.974851451037914 ], [ -93.27820658683777, 44.97450991073643 ], [ -93.27754139900208, 44.97479073291075 ], [ -93.27737510204315, 44.975010835815795 ], [ -93.2776540517807, 44.97512088695153 ], [ -93.27778816223145, 44.97495011785742 ], [ -93.27784717082976, 44.97497288709934 ], [ -93.27788472175598, 44.97494632298287 ], [ -93.27806711196898, 44.97503360503364 ], [ -93.27848017215729, 44.974851451037914 ] ] ] } }] } http://geojson.io/ http://bl.ocks.org/d/d002a4f1d7bc81ccf2fcc57a120631c9 • Easy to edit • readable • Easily converted to from other providers • Larger footprint
- 44. www.agritrackingsystems.com AGRI TRACKING SYSTEMS TopoJSON { "type": "Topology", "objects": { "collection": { "type": "GeometryCollection", "geometries": [{ "type": "Polygon", "properties": { "name": "First Baptist Church" }, "arcs": [ [0] ] }] } }, "arcs": [ [ [0, 5590], [2475, -5590], [6019, 4596], [1505, 3602], [-2524, 1801], [-1213, -2795], [-534, 373], [-340, -435],[-1651, 1429], [-3737, -2981] ] ], "transform": { "scale": [1.1051806321989621e-7, 6.110373188317508e-8], "translate": [-93.27848017215729, 44.97450991073643] }, "bbox": [ -93.27848017215729, 44.97450991073643, -93.27737510204315, 44.97512088695153] }http://geojson.io/ • Browser delivery • Smaller files, less bandwidth • Topology-aware visualizations • Not Easy to edit
- 45. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Quantization ( lower precision points ) TopoJSON
- 47. Making A Map
- 48. www.agritrackingsystems.com AGRI TRACKING SYSTEMS <!DOCTYPE html> <html> <head> <title>Simple Leaflet Map</title> <meta charset="utf-8" /> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-1.0-rc.1/leaflet.js"> </script> </head> <body> </body> </html> Getting Started Include the JS and CSS files No Dependencies! • Init the map • div to render into • starting location • zoom level • Set the Base Tile Layer <script> var map = L.map('map').setView([-41.2858, 174.78682], 14); </script> <div id="map" style="width: 600px; height: 400px"></div> L.tileLayer( "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ).addTo(map);
- 49. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Adding Tile Layers var Stamen_Terrain = L.tileLayer( 'http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', { subdomains: 'abcd', minZoom: 4, maxZoom: 18, ext: 'png' }).addTo(map); var MapQuestOpen_Aerial = L.tileLayer( 'http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', { type: 'sat', ext: 'jpg', subdomains: '1234' }).addTo(map); MapQuest Stamen
- 50. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Adding A Marker/Circle var myMarker = L.marker( [44.974988066588935,-93.27885031700134],{ 'title':'Hello', 'clickable ':true, 'draggable':true, 'riseOnHover':true }).addTo(map); var myCircle = L.circle( [ 44.974851451037914, -93.27848017215729 ], 200, { color: 'red' } ).addTo(map);
- 51. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Adding A Polyline/Polygon L.polyline([[ 44.974988066588935,-93.27885031700134 ],[ 44.97541309066637,-93.27772378921509 ]]).addTo(map); L.polygon([[ 44.974851451037914,-93.27848017215729 ], [ 44.97450991073643,-93.27820658683777 ], [ 44.97479073291075,-93.27754139900208 ], [ 44.975010835815795,-93.27737510204315 ], [ 44.97512088695153,-93.2776540517807 ], [ 44.97495011785742,-93.27778816223145 ], [ 44.97497288709934,-93.27784717082976 ], [ 44.97494632298287,-93.27788472175598 ], [ 44.97503360503364,-93.27806711196898 ], [ 44.974851451037914,-93.27848017215729 ]]).addTo(map);
- 53. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Bloomberg Financial Energy Breakdown
- 55. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 55Historical Weather Data Animation
- 58. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 58Phonegap & leaflet - Offline Maps
- 59. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Stamen - Topographical View
- 60. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Chesapeake Bay - Visualization Timeline
- 62. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Agri Tracking Systems keeps track of your farms, fields, crops, nutrient samples, budgets all the way down to your daily operations. Our purpose is simple, we want to give you the power to become more efficient by staying informed. www.agritrackingsystems.com Agri Mapping makes its simple to build your maps without having to read through tons of help guides. We provide all the information and tools you need, and none of the ones you don’t. And the best part is it is accessible from anywhere! www.agrimapping.com OUR PRODUCTS
Editor's Notes
- There are a number of reasons why you might want to make a map: you need to plot a location find directions figure out distance to somewhere get the Square footage of a building but you might be surprised to know that accomplishing that on your own can be less than exciting…
- Scott Steinbeck Father JavaScript Lover
- So lets start with driving directions. driving directions are simple right, you type in your start and end, and it tells you where to go…
- like this person, that was searching for fresh fish…
- so this is how it feels getting into mapping you start with a lot of pre conceptions of how to make a map and arrive at well its just a dot on a map right well sort of…
- ok so lets go over just a couple of the terms used in mapping geographic coordinate system Mercator projection datum quite a lot of up front learning just to put a marker on a map don't you think?
- Lets start with map projections and before i start, i want to say some of this information may come as a shock to you, so prepare yourself the earth is not flat…. as a matter of fact its quite round and for anyone that has tried to turn a 3D sphere into a 2D square, you will come to this same realization… hopefully
- which is bigger africa or greenland
- anyone know who this man is? Gerardus Mercator (mer-kay-tor) or Geert 5 March 1512 57 years old 1569.
- so then how do we get a flat map. this is how.. The map we see here is called the (mer-kay-tor) projection. and as you can see it is not a really a true representation of the earth. and despite its large amount of distortion (especially near its poles) it has stayed one of the most popular projections around. so you may ask yourself why hasn't someone made a more accurate map, i mean seriously this map is over 400 years old.
- well we have… there are actually over 30+ projections of earth each of which focus on different accuracies like size, navigation, and shape.
- by this point your probably like i give up, my childhood is ruined everything i knew was a lie. well hold tight, were not done…
- who here thinks the earth is a sphere, well your wrong, but thats not your fault so… earth is not a perfect circle, because the earth spins the gravitational force causes it spread out in near the center, so looks more like an oval or an ellipse and in reality its spreads out more below the equator making it similar to a pear shape
- so because earth is not a perfect circle and more closely is represented by an oval. we have to do calculations on it as an oval not a circle. and because it is not a perfect oval, depending on what side of the earth you live on, your oval may look a little different to solve this a number of standards have emerged above are the most common, and you can see how their view of the shape of the ellipsoid (or 3d oval) differs these different coordinate format are referred to as datum.
- and deciding which one to use, can make quite a big difference so if you were to go and put a place marker where your house was, and later on choose one of the other datum
- you may end up with an ocean view
- so now your probably through overwhelmed and your more like… but hold tight its going to get better.
- so what have we learned well mapping is hard, which is a problem, because your boss just told you that you need to make a map by the end of the day
- thankfully there have been a number of solutions created to try and bridge that gap for you but just how much is up for debate
- when we pick a framework we want something thats hot but only a little crazy plus we want it to be flexible inexpensive lightweight and simple and easy to use
- luckily the developer of leaflet had the same goals in mind Vlad, the creator of leaflet actually knew very little about GIS when he created it he created a framework that was extendable, and easy to use and as a result, this is the most popular mapping library available.
- some of the over 80+ major companies using leaflet in production
- the result is a framework that is flooded with all sorts of plugins allowing you to do almost anything. but to get started mapping, you only need a few lines of code
- so there are 2 parts to a map, the map points themselves and a background layer which we call a tile layer the awesome part is because its just an image, we can have many different styles and the only thing you have to do is tell it which style you want no need to move your points, just change the background and if you want a different map background you can use one of theses services or create your own
- and if google maps satellite is not your cup of tea we can turn up the heat and fill your lakes with lava
- alight so lets talk about the other half, markers markers come in 4 flavors a pin marker a line or (polyline as they refer to it), a circle, and a polygon.
- in addition we have 2 other types, multi polygons, and multi polylines but these are really just groups with one nifty feature, in polygons you can have cutouts which allows you to remove an area of your polygon.
- so lets take a second to talk about plugins although none of theses are required to get a working map, there are a number of great ones that you can use.
- Vector tiles make loading huge maps fast while offering full design flexibility. instead of rendered jpeg images map box has created a set of tile layers that are created in vector format, and are based on a color swatch that is changeable allowing you to customize the style of your map
- the polyline decorator provides an easy to use api on add icons to your lines this is especially helpful if you are trying to show direction or add some style
- Awesome markers, give you the ability to replace the boring old markers with colorful markers and include the entire font-awesome library of icons to pick from
- leaflet photo will automatically take a list of photos along with a map location add icons over the locations group multiple photos and display a slideshow when you click on them
- for situations where you have a large number of points, marker clustering helps to take some of the clutter out of your maps
- and if you need to see all of the markers, the spidery plugin allow you too click on a group of markers and it will automatically spread them out so its easier to find the one you were looking for
- for more advanced needs like showing high foot traffic areas a heatmap plugin, can help represent the data in a nice visual format
- and for displaying data over time, the time dimension plugin will show a progression of points, polygons, or images over time and all you have to do is tell it when and where.