Skip to content

Instantly share code, notes, and snippets.

@geografa
Last active Aug 29, 2015
Embed
What would you like to do?
custom-marker-from-geojson
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.ie.css' rel='stylesheet'>
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker {}
</style>
</head>
<body>
<div id='map'></div>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'grafa.h0599p73')
.setView([45.68882429809956, -121.84547066688538], 16);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map.geojson');
// function to run once marker has loaded
featureLayer.on('ready', function(){
// navigate the GeoJSON to get to the coordinates
var geojson = featureLayer.getGeoJSON();
var myIcon = L.icon({
iconUrl: 'https://i.cloudup.com/E44IxhcVLk.thumb.png',
iconSize: [75,75]
});
for (i = geojson.features.length - 1; i >= 0; i--) {
// add the coords in the correct order
var coords = geojson["features"][i]["geometry"]["coordinates"],
lat = coords[1],
lng = coords[0];
L.marker([lat,lng], {icon: myIcon})
.addTo(map);
};
});
</script>
</body>
</html>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"title": "Eagle sighting",
"icon": "yellow-dot.png"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.84257388114929,
45.68924399864299
]
}
},
{
"type": "Feature",
"properties": {
"title": "Otter sighting",
"icon": "yellow-dot.png"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.84423685073851,
45.688494531177625
]
}
},
{
"type": "Feature",
"properties": {
"title": "Treasure chest",
"icon": "yellow-dot.png"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.84667229652405,
45.68947633151819
]
}
},
{
"type": "Feature",
"properties": {
"title": "Salmon sighting",
"icon": "yellow-dot.png"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.84827089309691,
45.690353192062354
]
}
},
{
"type": "Feature",
"properties": {
"title": "lunch",
"icon": "yellow-dot.png"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.84469819068909,
45.68964870689875
]
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment