Skip to content

Instantly share code, notes, and snippets.

@suddeb suddeb/Mapbox_3

Last active Aug 29, 2015
Embed
What would you like to do?
<apex:page Controller="HouseHoldController" showChat="false" sidebar="false" showHeader="false">
<head>
<title>Leaflet Draw</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<ENTER YOUR DEFAULT PUBLIC TOKEN>';
var map = L.mapbox.map('map', '<ENTER YOUR BASE PROJECT ID>')
.setView([25.7742700, -80.1936600], 2);
//Prepare GeoJson Data
var geojson = {
type: 'FeatureCollection',
features: [
<apex:repeat value="{!allHouseHolds}" var="singleHouseHold">
{
type: 'Feature',
properties: {
title: '{!singleHouseHold.Household_Name__c}',
'marker-color': '#f86767',
'marker-size': 'large',
'marker-symbol': 'star'
},
geometry: {
type: 'Point',
coordinates: [{!singleHouseHold.Household_Location__Longitude__s},{!singleHouseHold.Household_Location__Latitude__s}]
}
},
</apex:repeat>
]
};
//map.legendControl.addLegend('Legend content');
console.log(geojson );
var myLayer = L.mapbox.featureLayer(geojson).addTo(map);
//Show popup with information on mouse click
myLayer.on('click',function(e){
e.layer.openPopup();
});
</script>
</body>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.