first commit
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Basic map
|
||||
*
|
||||
* Specific JS code additions for maps_google_basic.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
var map;
|
||||
|
||||
// Map settings
|
||||
function initialize() {
|
||||
|
||||
// Optinos
|
||||
var mapOptions = {
|
||||
zoom: 12,
|
||||
center: new google.maps.LatLng(47.496, 19.037)
|
||||
};
|
||||
|
||||
// Apply options
|
||||
map = new google.maps.Map($('.map-basic')[0], mapOptions);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Events
|
||||
*
|
||||
* Specific JS code additions for maps_google_basic.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Map settings
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 10,
|
||||
center: new google.maps.LatLng(53.5336847, 10.0054124)
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-click-event')[0], mapOptions);
|
||||
|
||||
// Add markers
|
||||
var marker = new google.maps.Marker({
|
||||
position: map.getCenter(),
|
||||
map: map,
|
||||
title: 'Click to zoom'
|
||||
});
|
||||
|
||||
// "Change" event
|
||||
google.maps.event.addListener(map, 'center_changed', function() {
|
||||
|
||||
// 3 seconds after the center of the map has changed, pan back to the marker
|
||||
window.setTimeout(function() {
|
||||
map.panTo(marker.getPosition());
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
// "Click" event
|
||||
google.maps.event.addListener(marker, 'click', function() {
|
||||
map.setZoom(14);
|
||||
map.setCenter(marker.getPosition());
|
||||
});
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Showing coordinates
|
||||
*
|
||||
* Specific JS code additions for maps_google_basic.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Variables
|
||||
var map;
|
||||
var TILE_SIZE = 256;
|
||||
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
|
||||
|
||||
// Minimum and maximum values
|
||||
function bound(value, opt_min, opt_max) {
|
||||
if (opt_min != null) value = Math.max(value, opt_min);
|
||||
if (opt_max != null) value = Math.min(value, opt_max);
|
||||
return value;
|
||||
}
|
||||
|
||||
// Degrees to radians
|
||||
function degreesToRadians(deg) {
|
||||
return deg * (Math.PI / 180);
|
||||
}
|
||||
|
||||
// Radians to degrees
|
||||
function radiansToDegrees(rad) {
|
||||
return rad / (Math.PI / 180);
|
||||
}
|
||||
|
||||
// Constructor
|
||||
function MercatorProjection() {
|
||||
this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
|
||||
this.pixelsPerLonDegree_ = TILE_SIZE / 360;
|
||||
this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
|
||||
}
|
||||
|
||||
// From latitude to longitude
|
||||
MercatorProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) {
|
||||
var me = this;
|
||||
var point = opt_point || new google.maps.Point(0, 0);
|
||||
var origin = me.pixelOrigin_;
|
||||
|
||||
point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
|
||||
|
||||
// Truncating to 0.9999 effectively limits latitude to 89.189. This is
|
||||
// about a third of a tile past the edge of the world tile.
|
||||
var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
|
||||
point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
|
||||
return point;
|
||||
};
|
||||
|
||||
// From longitude to latitude
|
||||
MercatorProjection.prototype.fromPointToLatLng = function(point) {
|
||||
var me = this;
|
||||
var origin = me.pixelOrigin_;
|
||||
var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
|
||||
var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
|
||||
var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
|
||||
return new google.maps.LatLng(lat, lng);
|
||||
};
|
||||
|
||||
// Create content
|
||||
function createInfoWindowContent() {
|
||||
var numTiles = 1 << map.getZoom();
|
||||
var projection = new MercatorProjection();
|
||||
var worldCoordinate = projection.fromLatLngToPoint(chicago);
|
||||
var pixelCoordinate = new google.maps.Point(worldCoordinate.x * numTiles, worldCoordinate.y * numTiles);
|
||||
var tileCoordinate = new google.maps.Point(
|
||||
Math.floor(pixelCoordinate.x / TILE_SIZE),
|
||||
Math.floor(pixelCoordinate.y / TILE_SIZE));
|
||||
|
||||
return [
|
||||
'Chicago, IL',
|
||||
'LatLng: ' + chicago.lat() + ' , ' + chicago.lng(),
|
||||
'World Coordinate: ' + worldCoordinate.x + ' , ' + worldCoordinate.y,
|
||||
'Pixel Coordinate: ' + Math.floor(pixelCoordinate.x) + ' , ' + Math.floor(pixelCoordinate.y),
|
||||
'Tile Coordinate: ' + tileCoordinate.x + ' , ' + tileCoordinate.y + ' at Zoom Level: ' + map.getZoom()
|
||||
].join('<br>');
|
||||
}
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 10,
|
||||
center: chicago
|
||||
};
|
||||
|
||||
// Apply options
|
||||
map = new google.maps.Map($('.map-coordinates')[0], mapOptions);
|
||||
|
||||
// Info window
|
||||
var coordInfoWindow = new google.maps.InfoWindow();
|
||||
coordInfoWindow.setContent(createInfoWindowContent());
|
||||
coordInfoWindow.setPosition(chicago);
|
||||
coordInfoWindow.open(map);
|
||||
|
||||
// Add "Change" event
|
||||
google.maps.event.addListener(map, 'zoom_changed', function() {
|
||||
coordInfoWindow.setContent(createInfoWindowContent());
|
||||
coordInfoWindow.open(map);
|
||||
});
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # HTML5 geolocation
|
||||
*
|
||||
* Specific JS code additions for maps_google_basic.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Note: This example requires that you consent to location sharing when
|
||||
// prompted by your browser. If you see a blank space instead of the map, this
|
||||
// is probably because you have denied permission for location sharing.
|
||||
|
||||
var map;
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Optinos
|
||||
var mapOptions = {
|
||||
zoom: 12
|
||||
};
|
||||
|
||||
// Apply options
|
||||
map = new google.maps.Map($('.map-geolocation')[0], mapOptions);
|
||||
|
||||
// Try HTML5 geolocation
|
||||
if(navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
|
||||
|
||||
// Info window
|
||||
var infowindow = new google.maps.InfoWindow({
|
||||
map: map,
|
||||
position: pos,
|
||||
content: 'Location found using HTML5'
|
||||
});
|
||||
|
||||
map.setCenter(pos);
|
||||
}, function() {
|
||||
handleNoGeolocation(true);
|
||||
});
|
||||
}
|
||||
else {
|
||||
|
||||
// Browser doesn't support Geolocation
|
||||
handleNoGeolocation(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle errors
|
||||
function handleNoGeolocation(errorFlag) {
|
||||
if (errorFlag) {
|
||||
var content = 'Error: The Geolocation service failed.';
|
||||
}
|
||||
else {
|
||||
var content = 'Error: Your browser doesn\'t support geolocation.';
|
||||
}
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
map: map,
|
||||
position: new google.maps.LatLng(60, 105),
|
||||
content: content
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var infowindow = new google.maps.InfoWindow(options);
|
||||
map.setCenter(options.position);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Adding controls
|
||||
*
|
||||
* Specific JS code additions for maps_google_controls.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 11,
|
||||
center: new google.maps.LatLng(48.136, 11.574),
|
||||
panControl: false,
|
||||
zoomControl: false,
|
||||
scaleControl: true
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-adding-controls')[0], mapOptions);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Control options
|
||||
*
|
||||
* Specific JS code additions for maps_google_controls.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 6,
|
||||
center: new google.maps.LatLng(51.164, 10.454),
|
||||
mapTypeControl: true,
|
||||
mapTypeControlOptions: {
|
||||
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
|
||||
},
|
||||
zoomControl: true,
|
||||
zoomControlOptions: {
|
||||
style: google.maps.ZoomControlStyle.SMALL
|
||||
}
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-control-options')[0], mapOptions);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Control positioning
|
||||
*
|
||||
* Specific JS code additions for maps_google_controls.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Optinos
|
||||
var mapOptions = {
|
||||
zoom: 12,
|
||||
center: new google.maps.LatLng(-28.643387, 153.612224),
|
||||
mapTypeControl: true,
|
||||
mapTypeControlOptions: {
|
||||
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
|
||||
position: google.maps.ControlPosition.BOTTOM_CENTER
|
||||
},
|
||||
panControl: true,
|
||||
panControlOptions: {
|
||||
position: google.maps.ControlPosition.TOP_RIGHT
|
||||
},
|
||||
zoomControl: true,
|
||||
zoomControlOptions: {
|
||||
style: google.maps.ZoomControlStyle.LARGE,
|
||||
position: google.maps.ControlPosition.LEFT_CENTER
|
||||
},
|
||||
scaleControl: true,
|
||||
streetViewControl: true,
|
||||
streetViewControlOptions: {
|
||||
position: google.maps.ControlPosition.LEFT_TOP
|
||||
}
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-control-positioning')[0], mapOptions);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Disable default UI
|
||||
*
|
||||
* Specific JS code additions for maps_google_controls.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 12,
|
||||
center: new google.maps.LatLng(48.858, 2.347),
|
||||
disableDefaultUI: true
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-ui-disabled')[0], mapOptions);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Circles
|
||||
*
|
||||
* Specific JS code additions for maps_google_drawings.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// This example creates circles on the map, representing
|
||||
// populations in North America.
|
||||
|
||||
// First, create an object containing LatLng and population for each city.
|
||||
var citymap = {};
|
||||
citymap['wroclaw'] = {
|
||||
center: new google.maps.LatLng(51.112, 17.052),
|
||||
population: 271485
|
||||
};
|
||||
citymap['budapest'] = {
|
||||
center: new google.maps.LatLng(47.481, 19.130),
|
||||
population: 840583
|
||||
};
|
||||
citymap['kernstadt'] = {
|
||||
center: new google.maps.LatLng(51.720, 8.764),
|
||||
population: 385779
|
||||
};
|
||||
citymap['nancy'] = {
|
||||
center: new google.maps.LatLng(48.688, 6.173),
|
||||
population: 603502
|
||||
};
|
||||
citymap['munich'] = {
|
||||
center: new google.maps.LatLng(48.154, 11.541),
|
||||
population: 594039
|
||||
};
|
||||
citymap['warsaw'] = {
|
||||
center: new google.maps.LatLng(52.232, 21.061),
|
||||
population: 492093
|
||||
};
|
||||
|
||||
|
||||
// Initialize
|
||||
var cityCircle;
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 6,
|
||||
center: new google.maps.LatLng(50.059, 14.465),
|
||||
mapTypeId: google.maps.MapTypeId.TERRAIN
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-drawing-circles')[0], mapOptions);
|
||||
|
||||
|
||||
// Construct the circle for each value in citymap.
|
||||
// Note: We scale the area of the circle based on the population.
|
||||
for (var city in citymap) {
|
||||
|
||||
// Options
|
||||
var populationOptions = {
|
||||
strokeColor: '#b41b1b',
|
||||
strokeOpacity: 0.5,
|
||||
strokeWeight: 1,
|
||||
fillColor: '#b41b1b',
|
||||
fillOpacity: 0.2,
|
||||
map: map,
|
||||
center: citymap[city].center,
|
||||
radius: Math.sqrt(citymap[city].population) * 100
|
||||
};
|
||||
|
||||
// Add the circle for this city to the map.
|
||||
cityCircle = new google.maps.Circle(populationOptions);
|
||||
}
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Polygons
|
||||
*
|
||||
* Specific JS code additions for maps_google_drawings.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// This example creates a simple polygon representing the Bermuda Triangle.
|
||||
// Note that the code specifies only three LatLng coordinates for the
|
||||
// polygon. The API automatically draws a
|
||||
// stroke connecting the last LatLng back to the first LatLng.
|
||||
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 5,
|
||||
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
|
||||
mapTypeId: google.maps.MapTypeId.TERRAIN
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-drawing-polygon')[0], mapOptions);
|
||||
|
||||
|
||||
// Define the LatLng coordinates for the polygon's path. Note that there's
|
||||
// no need to specify the final coordinates to complete the polygon, because
|
||||
// The Google Maps JavaScript API will automatically draw the closing side.
|
||||
var bermudaTriangle;
|
||||
|
||||
// Coordinates
|
||||
var triangleCoords = [
|
||||
new google.maps.LatLng(25.774252, -80.190262),
|
||||
new google.maps.LatLng(18.466465, -66.118292),
|
||||
new google.maps.LatLng(32.321384, -64.75737)
|
||||
];
|
||||
|
||||
// Polygon
|
||||
bermudaTriangle = new google.maps.Polygon({
|
||||
paths: triangleCoords,
|
||||
strokeColor: '#FF0000',
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 1,
|
||||
fillColor: '#FF0000',
|
||||
fillOpacity: 0.2
|
||||
});
|
||||
|
||||
bermudaTriangle.setMap(map);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Polylines
|
||||
*
|
||||
* Specific JS code additions for maps_google_drawings.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// This example creates an interactive map which constructs a
|
||||
// polyline based on user clicks. Note that the polyline only appears
|
||||
// once its path property contains two LatLng coordinates.
|
||||
|
||||
var poly;
|
||||
var map;
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 8,
|
||||
center: new google.maps.LatLng(41.651, -0.894) // Center the map on Chicago, USA.
|
||||
};
|
||||
|
||||
// Apply options
|
||||
map = new google.maps.Map($('.map-drawing-polyline')[0], mapOptions);
|
||||
|
||||
|
||||
// Polyline options
|
||||
var polyOptions = {
|
||||
strokeColor: '#555',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 2
|
||||
};
|
||||
|
||||
// Apply options
|
||||
poly = new google.maps.Polyline(polyOptions);
|
||||
poly.setMap(map);
|
||||
|
||||
// Add a listener for the click event
|
||||
google.maps.event.addListener(map, 'click', addLatLng);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Handles click events on a map, and adds a new point to the Polyline.
|
||||
// @param {google.maps.MouseEvent} event
|
||||
|
||||
function addLatLng(event) {
|
||||
|
||||
var path = poly.getPath();
|
||||
|
||||
// Because path is an MVCArray, we can simply append a new coordinate
|
||||
// and it will automatically appear.
|
||||
path.push(event.latLng);
|
||||
|
||||
// Add a new marker at the new plotted point on the polyline.
|
||||
var marker = new google.maps.Marker({
|
||||
position: event.latLng,
|
||||
title: '#' + path.getLength(),
|
||||
map: map
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Rectangles
|
||||
*
|
||||
* Specific JS code additions for maps_google_drawings.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 11,
|
||||
center: new google.maps.LatLng(33.678176, -116.242568),
|
||||
mapTypeId: google.maps.MapTypeId.TERRAIN
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-drawing-rectangle')[0], mapOptions);
|
||||
|
||||
// Add rectangle
|
||||
var rectangle = new google.maps.Rectangle({
|
||||
strokeColor: '#FF0000',
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 2,
|
||||
fillColor: '#FF0000',
|
||||
fillOpacity: 0.35,
|
||||
map: map,
|
||||
bounds: new google.maps.LatLngBounds(
|
||||
new google.maps.LatLng(33.671068, -116.25128),
|
||||
new google.maps.LatLng(33.685282, -116.233942)
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bicycle layer
|
||||
*
|
||||
* Specific JS code additions for maps_google_layers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Set coordinates
|
||||
var myLatlng = new google.maps.LatLng(47.377455, 8.536715);
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 14,
|
||||
center: myLatlng
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-layer-bicycling')[0], mapOptions);
|
||||
|
||||
// Add layers
|
||||
var bikeLayer = new google.maps.BicyclingLayer();
|
||||
bikeLayer.setMap(map);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fusion table
|
||||
*
|
||||
* Specific JS code additions for maps_google_layers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Set coordinates
|
||||
var chicago = new google.maps.LatLng(41.850036, -87.6800523);
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
center: chicago,
|
||||
zoom: 12
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-layer-fusion-tables')[0], mapOptions);
|
||||
|
||||
// Add layers
|
||||
var layer = new google.maps.FusionTablesLayer({
|
||||
query: {
|
||||
select: '\'Geocodable address\'',
|
||||
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
|
||||
}
|
||||
});
|
||||
layer.setMap(map);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Traffic layer
|
||||
*
|
||||
* Specific JS code additions for maps_google_layers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Set coordinates
|
||||
var myLatlng = new google.maps.LatLng(40.4122142, -3.7059725);
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 12,
|
||||
center: myLatlng
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-layer-traffic')[0], mapOptions);
|
||||
|
||||
// Add layers
|
||||
var trafficLayer = new google.maps.TrafficLayer();
|
||||
trafficLayer.setMap(map);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Transit layer
|
||||
*
|
||||
* Specific JS code additions for maps_google_layers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Set coordinates
|
||||
var myLatlng = new google.maps.LatLng(51.501904,-0.115871);
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 14,
|
||||
center: myLatlng
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-layer-transit')[0], mapOptions);
|
||||
|
||||
// Add layers
|
||||
var transitLayer = new google.maps.TransitLayer();
|
||||
transitLayer.setMap(map);
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Animated markers
|
||||
*
|
||||
* Specific JS code additions for maps_google_markers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// If you're adding a number of markers, you may want to
|
||||
// drop them on the map consecutively rather than all at once.
|
||||
// This example shows how to use setTimeout() to space
|
||||
// your markers' animation.
|
||||
|
||||
|
||||
// Add Berlin coordinates
|
||||
var berlin = new google.maps.LatLng(52.520816, 13.410186);
|
||||
|
||||
// Add neighborhoods coordinates
|
||||
var neighborhoods = [
|
||||
new google.maps.LatLng(52.511467, 13.447179),
|
||||
new google.maps.LatLng(52.549061, 13.422975),
|
||||
new google.maps.LatLng(52.497622, 13.396110),
|
||||
new google.maps.LatLng(52.517683, 13.394393)
|
||||
];
|
||||
|
||||
|
||||
// Variables
|
||||
var markers = [];
|
||||
var iterator = 0;
|
||||
var map;
|
||||
|
||||
|
||||
// Initialize
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 12,
|
||||
center: berlin
|
||||
};
|
||||
|
||||
// Apply options
|
||||
map = new google.maps.Map($('.map-marker-animation')[0], mapOptions);
|
||||
}
|
||||
|
||||
|
||||
// Drop markers
|
||||
function drop() {
|
||||
for (var i = 0; i < neighborhoods.length; i++) {
|
||||
setTimeout(function() {
|
||||
addMarker();
|
||||
}, i * 200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add markers
|
||||
function addMarker() {
|
||||
markers.push(new google.maps.Marker({
|
||||
position: neighborhoods[iterator],
|
||||
map: map,
|
||||
draggable: false,
|
||||
animation: google.maps.Animation.DROP
|
||||
}));
|
||||
iterator++;
|
||||
}
|
||||
|
||||
|
||||
// Drop markers on button click
|
||||
$('.drop-markers').on('click', function() {
|
||||
drop();
|
||||
});
|
||||
|
||||
|
||||
// Initialize map on window load
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Basic markers
|
||||
*
|
||||
* Specific JS code additions for maps_google_markers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// Setup map
|
||||
function initialize() {
|
||||
|
||||
// Set coordinates
|
||||
var myLatlng = new google.maps.LatLng(52.374,4.898);
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 10,
|
||||
center: myLatlng
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-marker-simple')[0], mapOptions);
|
||||
var contentString = 'Amsterdam';
|
||||
|
||||
// Add info window
|
||||
var infowindow = new google.maps.InfoWindow({
|
||||
content: contentString
|
||||
});
|
||||
|
||||
// Add marker
|
||||
var marker = new google.maps.Marker({
|
||||
position: myLatlng,
|
||||
map: map,
|
||||
title: 'Hello World!'
|
||||
});
|
||||
|
||||
// Attach click event
|
||||
google.maps.event.addListener(marker, 'click', function() {
|
||||
infowindow.open(map,marker);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// Initialize map on window load
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,102 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Custom marker symbols
|
||||
*
|
||||
* Specific JS code additions for maps_google_markers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// The following example creates complex markers to indicate beaches near
|
||||
// Sydney, NSW, Australia. Note that the anchor is set to
|
||||
// (0,32) to correspond to the base of the flagpole.
|
||||
|
||||
|
||||
// Map settings
|
||||
function initialize() {
|
||||
|
||||
// Optinos
|
||||
var mapOptions = {
|
||||
zoom: 11,
|
||||
center: new google.maps.LatLng(-33.9, 151.2)
|
||||
}
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-symbol-custom')[0], mapOptions);
|
||||
|
||||
// Set markers
|
||||
setMarkers(map, beaches);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Data for the markers consisting of a name, a LatLng and a zIndex for
|
||||
* the order in which these markers should display on top of each
|
||||
* other.
|
||||
*/
|
||||
var beaches = [
|
||||
['Bondi Beach', -33.890542, 151.274856, 4],
|
||||
['Coogee Beach', -33.923036, 151.259052, 5],
|
||||
['Cronulla Beach', -34.028249, 151.157507, 3],
|
||||
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
|
||||
['Maroubra Beach', -33.950198, 151.259302, 1]
|
||||
];
|
||||
|
||||
|
||||
// Set markers
|
||||
function setMarkers(map, locations) {
|
||||
|
||||
// Add markers to the map
|
||||
|
||||
// Marker sizes are expressed as a Size of X,Y
|
||||
// where the origin of the image (0,0) is located
|
||||
// in the top left of the image.
|
||||
|
||||
// Origins, anchor positions and coordinates of the marker
|
||||
// increase in the X direction to the right and in
|
||||
// the Y direction down.
|
||||
var image = {
|
||||
url: 'assets/images/ui/map_marker.png',
|
||||
|
||||
// This marker is 20 pixels wide by 32 pixels tall.
|
||||
size: new google.maps.Size(20, 32),
|
||||
|
||||
// The origin for this image is 0,0.
|
||||
origin: new google.maps.Point(0,0),
|
||||
|
||||
// The anchor for this image is the base of the flagpole at 0,32.
|
||||
anchor: new google.maps.Point(0, 32)
|
||||
};
|
||||
|
||||
|
||||
// Shapes define the clickable region of the icon.
|
||||
// The type defines an HTML <area> element 'poly' which
|
||||
// traces out a polygon as a series of X,Y points. The final
|
||||
// coordinate closes the poly by connecting to the first
|
||||
// coordinate.
|
||||
var shape = {
|
||||
coords: [1, 1, 1, 20, 18, 20, 18 , 1],
|
||||
type: 'poly'
|
||||
};
|
||||
for (var i = 0; i < locations.length; i++) {
|
||||
var beach = locations[i];
|
||||
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
|
||||
var marker = new google.maps.Marker({
|
||||
position: myLatLng,
|
||||
map: map,
|
||||
icon: image,
|
||||
shape: shape,
|
||||
title: beach[0],
|
||||
zIndex: beach[3]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Load maps
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Predefined marker symbols
|
||||
*
|
||||
* Specific JS code additions for maps_google_markers.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// This example uses a symbol to add a vector-based icon to a marker.
|
||||
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
|
||||
// Google Maps JavaScript API.
|
||||
|
||||
// Setup map
|
||||
function initialize() {
|
||||
|
||||
// Options
|
||||
var mapOptions = {
|
||||
zoom: 12,
|
||||
center: new google.maps.LatLng(48.220, 16.380)
|
||||
};
|
||||
|
||||
// Apply options
|
||||
var map = new google.maps.Map($('.map-symbol-predefined')[0], mapOptions);
|
||||
|
||||
// Setup markers
|
||||
var marker = new google.maps.Marker({
|
||||
position: map.getCenter(),
|
||||
icon: {
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
scale: 10
|
||||
},
|
||||
draggable: true,
|
||||
map: map
|
||||
});
|
||||
}
|
||||
|
||||
// Load map
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,309 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Vector maps
|
||||
*
|
||||
* Specific JS code additions for maps_vector.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
// World map
|
||||
$('.map-world').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#93D389'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Custom markers
|
||||
$('.map-world-markers').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
scaleColors: ['#C8EEFF', '#0071A4'],
|
||||
normalizeFunction: 'polynomial',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#D6E1ED'
|
||||
}
|
||||
},
|
||||
hoverOpacity: 0.7,
|
||||
hoverColor: false,
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 7,
|
||||
'fill': '#336BB5',
|
||||
'fill-opacity': 0.8,
|
||||
'stroke': '#fff',
|
||||
'stroke-width' : 1.5,
|
||||
'stroke-opacity': 0.9
|
||||
},
|
||||
hover: {
|
||||
'stroke': '#fff',
|
||||
'fill-opacity': 1,
|
||||
'stroke-width': 1.5
|
||||
}
|
||||
},
|
||||
focusOn: {
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
scale: 2
|
||||
},
|
||||
markers: [
|
||||
{latLng: [41.90, 12.45], name: 'Vatican City'},
|
||||
{latLng: [43.73, 7.41], name: 'Monaco'},
|
||||
{latLng: [40.726, -111.778], name: 'Salt Lake City'},
|
||||
{latLng: [39.092, -94.575], name: 'Kansas City'},
|
||||
{latLng: [25.782, -80.231], name: 'Miami'},
|
||||
{latLng: [8.967, -79.458], name: 'Panama City'},
|
||||
{latLng: [19.400, -99.124], name: 'Mexico City'},
|
||||
{latLng: [40.705, -73.978], name: 'New York'},
|
||||
{latLng: [33.98, -118.132], name: 'Los Angeles'},
|
||||
{latLng: [47.614, -122.335], name: 'Seattle'},
|
||||
{latLng: [44.97, -93.261], name: 'Minneapolis'},
|
||||
{latLng: [39.73, -105.015], name: 'Denver'},
|
||||
{latLng: [41.833, -87.732], name: 'Chicago'},
|
||||
{latLng: [29.741, -95.395], name: 'Houston'},
|
||||
{latLng: [23.05, -82.33], name: 'Havana'},
|
||||
{latLng: [45.41, -75.70], name: 'Ottawa'},
|
||||
{latLng: [53.555, -113.493], name: 'Edmonton'},
|
||||
{latLng: [-0.23, -78.52], name: 'Quito'},
|
||||
{latLng: [18.50, -69.99], name: 'Santo Domingo'},
|
||||
{latLng: [4.61, -74.08], name: 'Bogotá'},
|
||||
{latLng: [14.08, -87.21], name: 'Tegucigalpa'},
|
||||
{latLng: [17.25, -88.77], name: 'Belmopan'},
|
||||
{latLng: [14.64, -90.51], name: 'New Guatemala'},
|
||||
{latLng: [-15.775, -47.797], name: 'Brasilia'},
|
||||
{latLng: [-3.790, -38.518], name: 'Fortaleza'},
|
||||
{latLng: [50.402, 30.532], name: 'Kiev'},
|
||||
{latLng: [53.883, 27.594], name: 'Minsk'},
|
||||
{latLng: [52.232, 21.061], name: 'Warsaw'},
|
||||
{latLng: [52.507, 13.426], name: 'Berlin'},
|
||||
{latLng: [50.059, 14.465], name: 'Prague'},
|
||||
{latLng: [47.481, 19.130], name: 'Budapest'},
|
||||
{latLng: [52.374, 4.898], name: 'Amsterdam'},
|
||||
{latLng: [48.858, 2.347], name: 'Paris'},
|
||||
{latLng: [40.437, -3.679], name: 'Madrid'},
|
||||
{latLng: [39.938, 116.397], name: 'Beijing'},
|
||||
{latLng: [28.646, 77.093], name: 'Delhi'},
|
||||
{latLng: [25.073, 55.229], name: 'Dubai'},
|
||||
{latLng: [35.701, 51.349], name: 'Tehran'},
|
||||
{latLng: [7.11, 171.06], name: 'Marshall Islands'},
|
||||
{latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
|
||||
{latLng: [3.2, 73.22], name: 'Maldives'},
|
||||
{latLng: [35.88, 14.5], name: 'Malta'},
|
||||
{latLng: [12.05, -61.75], name: 'Grenada'},
|
||||
{latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
|
||||
{latLng: [13.16, -59.55], name: 'Barbados'},
|
||||
{latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
|
||||
{latLng: [-4.61, 55.45], name: 'Seychelles'},
|
||||
{latLng: [7.35, 134.46], name: 'Palau'},
|
||||
{latLng: [42.5, 1.51], name: 'Andorra'},
|
||||
{latLng: [14.01, -60.98], name: 'Saint Lucia'},
|
||||
{latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
|
||||
{latLng: [1.3, 103.8], name: 'Singapore'},
|
||||
{latLng: [1.46, 173.03], name: 'Kiribati'},
|
||||
{latLng: [-21.13, -175.2], name: 'Tonga'},
|
||||
{latLng: [15.3, -61.38], name: 'Dominica'},
|
||||
{latLng: [-20.2, 57.5], name: 'Mauritius'},
|
||||
{latLng: [26.02, 50.55], name: 'Bahrain'},
|
||||
{latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// Country choropleth map
|
||||
$.getJSON('assets/demo_data/maps/vector/unemployment.json', function (data) {
|
||||
|
||||
// Year
|
||||
var val = 2009;
|
||||
|
||||
// Values
|
||||
statesValues = jvm.values.apply({}, jvm.values(data.states)),
|
||||
metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
|
||||
metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));
|
||||
|
||||
// Configuration
|
||||
$('.map-unemployment').vectorMap({
|
||||
map: 'us_aea_en',
|
||||
backgroundColor: 'transparent',
|
||||
markers: data.metro.coords,
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 6,
|
||||
'fill-opacity': 0.9,
|
||||
'stroke': '#fff',
|
||||
'stroke-width' : 1.5,
|
||||
'stroke-opacity': 0.95
|
||||
},
|
||||
hover: {
|
||||
'stroke': '#fff',
|
||||
'fill-opacity': 1,
|
||||
'stroke-width': 1.5
|
||||
}
|
||||
},
|
||||
series: {
|
||||
markers: [
|
||||
{
|
||||
attribute: 'fill',
|
||||
scale: ['#e67d64', '#e0330b'],
|
||||
values: data.metro.unemployment[val],
|
||||
min: jvm.min(metroUnemplValues),
|
||||
max: jvm.max(metroUnemplValues)
|
||||
},
|
||||
{
|
||||
attribute: 'r',
|
||||
scale: [5, 20],
|
||||
values: data.metro.population[val],
|
||||
min: jvm.min(metroPopValues),
|
||||
max: jvm.max(metroPopValues)
|
||||
}
|
||||
],
|
||||
regions: [{
|
||||
scale: ['#DEEBF7', '#08519C'],
|
||||
attribute: 'fill',
|
||||
values: data.states[val],
|
||||
min: jvm.min(statesValues),
|
||||
max: jvm.max(statesValues)
|
||||
}]
|
||||
},
|
||||
|
||||
onMarkerLabelShow: function(event, label, index) {
|
||||
label.html(
|
||||
''+data.metro.names[index]+'<br>'+
|
||||
'Population: '+data.metro.population[val][index]+'<br>'+
|
||||
'Unemployment rate: '+data.metro.unemployment[val][index]+'%'
|
||||
);
|
||||
},
|
||||
|
||||
onRegionLabelShow: function(event, label, code) {
|
||||
label.html(
|
||||
''+label.html()+'<br>'+
|
||||
'Unemployment rate: '+data.states[val][code]+'%'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Draw map
|
||||
var mapObject = $('.map-unemployment').vectorMap('get', 'mapObject');
|
||||
});
|
||||
|
||||
|
||||
// Choropleth map
|
||||
$('.map-choropleth').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
series: {
|
||||
regions: [{
|
||||
values: gdpData,
|
||||
scale: ['#C8EEFF', '#0071A4'],
|
||||
normalizeFunction: 'polynomial'
|
||||
}]
|
||||
},
|
||||
onRegionLabelShow: function(e, el, code){
|
||||
el.html(el.html()+'<br>'+'GDP - '+gdpData[code]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Regions selection
|
||||
//
|
||||
|
||||
// Set data
|
||||
markers = [
|
||||
{latLng: [52.50, 13.39], name: 'Berlin'},
|
||||
{latLng: [53.56, 10.00], name: 'Hamburg'},
|
||||
{latLng: [48.13, 11.56], name: 'Munich'},
|
||||
{latLng: [50.95, 6.96], name: 'Cologne'},
|
||||
{latLng: [50.11, 8.68], name: 'Frankfurt am Main'},
|
||||
{latLng: [48.77, 9.17], name: 'Stuttgart'},
|
||||
{latLng: [51.23, 6.78], name: 'Düsseldorf'},
|
||||
{latLng: [51.51, 7.46], name: 'Dortmund'},
|
||||
{latLng: [51.45, 7.01], name: 'Essen'},
|
||||
{latLng: [53.07, 8.80], name: 'Bremen'}
|
||||
],
|
||||
cityAreaData = [
|
||||
887.70,
|
||||
755.16,
|
||||
310.69,
|
||||
405.17,
|
||||
248.31,
|
||||
207.35,
|
||||
217.22,
|
||||
280.71,
|
||||
210.32,
|
||||
325.42
|
||||
]
|
||||
|
||||
// Configuration
|
||||
var map = new jvm.WorldMap({
|
||||
container: $('.map-regions'),
|
||||
map: 'de_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
regionsSelectable: true,
|
||||
markersSelectable: true,
|
||||
markers: markers,
|
||||
markerStyle: {
|
||||
initial: {
|
||||
'fill': '#E77644',
|
||||
'stroke': '#fff',
|
||||
'stroke-width' : 1.5,
|
||||
'stroke-opacity': 0.9
|
||||
},
|
||||
hover: {
|
||||
'stroke': '#fff',
|
||||
'fill-opacity': 1,
|
||||
'stroke-width': 1.5
|
||||
},
|
||||
selected: {
|
||||
'fill': '#CA0020'
|
||||
}
|
||||
},
|
||||
regionStyle: {
|
||||
initial: {
|
||||
"stroke-width": 1.5,
|
||||
'stroke': '#fff',
|
||||
'fill': '#93D389'
|
||||
},
|
||||
selected: {
|
||||
'fill': '#00a2ca'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
markers: [{
|
||||
attribute: 'r',
|
||||
scale: [5, 15],
|
||||
values: cityAreaData
|
||||
}]
|
||||
},
|
||||
onRegionSelected: function(){
|
||||
if (window.localStorage) {
|
||||
window.localStorage.setItem(
|
||||
'jvectormap-selected-regions',
|
||||
JSON.stringify(map.getSelectedRegions())
|
||||
);
|
||||
}
|
||||
},
|
||||
onMarkerSelected: function(){
|
||||
if (window.localStorage) {
|
||||
window.localStorage.setItem(
|
||||
'jvectormap-selected-markers',
|
||||
JSON.stringify(map.getSelectedMarkers())
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set regions
|
||||
map.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ) );
|
||||
map.setSelectedMarkers( JSON.parse( window.localStorage.getItem('jvectormap-selected-markers') || '[]' ) );
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user