first commit

This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
+32
View File
@@ -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);
});
+115
View File
@@ -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);
});
+84
View File
@@ -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);
});
+37
View File
@@ -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);
});
+37
View File
@@ -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);
});
+37
View File
@@ -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);
});
+52
View File
@@ -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 &lt;area&gt; 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);
});
+309
View File
@@ -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') || '[]' ) );
});