Last active
August 29, 2015 14:01
-
-
Save EtienneDG/6169df5c914ea105dc73 to your computer and use it in GitHub Desktop.
Simple OpenLayers map
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 map; | |
function init(){ | |
//defining the projection and adding a map to an element | |
var sphericalMercatorProj = new OpenLayers.Projection('EPSG:900913'); | |
var geographicProj = new OpenLayers.Projection('EPSG:4326'); | |
map = new OpenLayers.Map('myMap'); | |
//adding layers | |
//only adding the default OSM layer here | |
map.addControl(new OpenLayers.Control.LayerSwitcher()); | |
mylayer = new OpenLayers.Layer.OSM(); | |
map.addLayer(mylayer); | |
//adding a new layer of markers | |
var markers = new OpenLayers.Layer.Markers( "Markers" ); | |
map.addLayer(markers); | |
//Loading data | |
//size (width,height) of the icon in pixels | |
var size = new OpenLayers.Size(21,25); | |
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); | |
//the offset is used to place the base of the pin on the actual coordinates | |
//if no offest defined, the center of the pin will be placed on the coordinates | |
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); | |
$.ajax({ | |
'async': true, | |
'global': false, | |
'url': "./data/data_heatmap.min.json", | |
'dataType': "json", | |
'success': function (data){ | |
var dataLength = data.length; | |
console.log(dataLength); | |
//iterating through each point | |
while(dataLength--){ | |
markers.addMarker( new OpenLayers.Marker( | |
new OpenLayers.LonLat(data[dataLength].lon, data[dataLength].lat) | |
.transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()) | |
,icon.clone())); | |
} | |
}}); | |
//final display settings go here | |
var mapCenter = new OpenLayers.LonLat(2.0,46.0); | |
map.setCenter(mapCenter.transform( | |
new OpenLayers.Projection('EPSG:4326'), | |
map.getProjectionObject()),6); | |
}; | |
window.onload = function() { | |
init(); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment