Last active
November 4, 2016 21:22
-
-
Save lewis500/4bfd4c87cbb3f17661e6414a910ff89c to your computer and use it in GitHub Desktop.
mapbox vs leaflet
This file contains 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 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.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg'; | |
//=====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/lewis500/civ00jva200m82irrxrhqyqiv', | |
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/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg', { | |
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 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/leaflet@1.0.1/dist/leaflet.css" /> | |
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> | |
</head> | |
<body> | |
<div id='main'> | |
<div class='col mapbox'> | |
<div id='mapbox'></div> | |
<div class='title'>Mapbox</div> | |
</div> | |
<div class='col leaflet'> | |
<div id='leaflet'></div> | |
<div class='title'>Leaflet</div> | |
</div> | |
</div> | |
<script src="code.js"></script> | |
</body> | |
</html> |
This file contains 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