forked from lewis500's block: mapbox vs leaflet
Last active
January 11, 2017 06:12
-
-
Save almccon/ad6c2a4bac17e7b2ae49decf4a91fff7 to your computer and use it in GitHub Desktop.
Mapbox GL vs Leaflet markers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var center = [-0.118, 51.511]; | |
| var accessToken = 'pk.eyJ1IjoiYWxtY2NvbiIsImEiOiJjaXhzam82cGUwMDA4MnFxbGhtYnlxZWpuIn0.lccg2WmAhgu2hcCwfdE4Tg'; | |
| //=====CREATE FAKE DATA===== | |
| let features = (function() { | |
| function randomer(x, scale) { | |
| return x + (Math.random() - 0.5) * scale | |
| } | |
| let n = 10000; | |
| let features = Array(n); | |
| for (let i = 0; i < n; i++) { | |
| features[i] = { | |
| type: "Feature", | |
| geometry: { | |
| type: "Point", | |
| coordinates: [randomer(center[0], 0.5), randomer(center[1], 0.4)] | |
| }, | |
| properties: { | |
| hello: 'hello' | |
| } | |
| }; | |
| } | |
| return features; | |
| })(); | |
| //this is my geojson! | |
| let geojson = { | |
| type: 'FeatureCollection', | |
| features: features | |
| }; | |
| //create mapbox-gl map | |
| function setupMapBox() { | |
| mapboxgl.accessToken = accessToken; | |
| var map = new mapboxgl.Map({ | |
| style: 'mapbox://styles/almccon/cixsjfxc0000n2slliqrjbjri', | |
| center: center, | |
| zoom: 13, | |
| interactive: true, | |
| container: 'mapbox' | |
| }); | |
| map.on("load", () => { | |
| map.addSource('data', { | |
| type: 'geojson', | |
| data: geojson | |
| }); | |
| map.addLayer({ | |
| id: 'points', | |
| source: 'data', | |
| type: 'circle', | |
| paint: { | |
| 'circle-radius': 3, | |
| 'circle-color': '#03A9F4' | |
| } | |
| }) | |
| }); | |
| // Create a popup, but don't add it to the map yet. | |
| var popup = new mapboxgl.Popup({ | |
| closeButton: false, | |
| closeOnClick: false | |
| }); | |
| map.on('mousemove', e => { | |
| var features = map.queryRenderedFeatures(e.point, { | |
| layers: ['points'] | |
| }); | |
| // Change the cursor style as a UI indicator. | |
| map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''; | |
| if (!features.length) { | |
| popup.remove(); | |
| return; | |
| } | |
| var feature = features[0]; | |
| // Populate the popup and set its coordinates | |
| // based on the feature found. | |
| popup.setLngLat(feature.geometry.coordinates) | |
| .setHTML(feature.properties.hello) | |
| .addTo(map); | |
| }); | |
| } | |
| setupMapBox(); | |
| //create leaflet map | |
| function setupLeaflet() { | |
| var map = L.map('leaflet') | |
| .setView(center.reverse(), 13); | |
| https: //api.mapbox.com/styles/v1/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg | |
| L.tileLayer('https://api.mapbox.com/styles/v1/almccon/cixsjfxc0000n2slliqrjbjri/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWxtY2NvbiIsImEiOiJjaXhzam82cGUwMDA4MnFxbGhtYnlxZWpuIn0.lccg2WmAhgu2hcCwfdE4Tg', { | |
| markerZoomAnimation: false | |
| }).addTo(map); | |
| var geojsonMarkerOptions = { | |
| radius: 3, | |
| fillColor: "#03A9F4", | |
| // color: "#fff", | |
| weight: 0, | |
| opacity: 1, | |
| fillOpacity: 0.8 | |
| }; | |
| L.geoJSON(geojson, { | |
| pointToLayer: (feature, latlng) => { | |
| var marker = L.circleMarker(latlng, geojsonMarkerOptions); | |
| marker.bindPopup(feature.properties.hello); | |
| marker.on('mouseover', function(e) { | |
| this.openPopup(); | |
| }); | |
| marker.on('mouseout', function(e) { | |
| this.closePopup(); | |
| }); | |
| return marker; | |
| } | |
| }).addTo(map); | |
| } | |
| setupLeaflet(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>mapbox example</title> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' /> | |
| <link href="style.css" rel='stylesheet'/> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| </head> | |
| <body> | |
| <div id='main'> | |
| <div class='col mapbox'> | |
| <div id='mapbox'></div> | |
| <div class='title'>Mapbox GL markers</div> | |
| </div> | |
| <div class='col leaflet'> | |
| <div id='leaflet'></div> | |
| <div class='title'>Leaflet markers</div> | |
| </div> | |
| </div> | |
| <script src="code.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #main{ | |
| font-family: Arial; | |
| display: flex; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left:0; | |
| } | |
| .col{ | |
| width: 50%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| #mapbox{ | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .leaflet{ | |
| border-left: 3px solid white; | |
| } | |
| #leaflet{ | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .title{ | |
| position: absolute; | |
| width: 100%; | |
| text-align: center; | |
| bottom: 10px; | |
| z-index: 5; | |
| color: black; | |
| font-size: 36px; | |
| background-color: rgba(255,255,255,.65) ; | |
| } | |
| .leaflet-pane{ | |
| z-index: 1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment