I have statistical data by leaflet tile. I try to put a label in the center of a tile so that it roughly looks like this:
So far I have code like this:
<div id="map" style="height: 512px; width: 512px;border: solid;">
</div>
...
var textLatLng = [?, ?]; // This is my question, how to calculate this?
var myTextLabel = L.marker(textLatLng, {
icon: L.divIcon({
className: 'text-labels',
html: '173'
}),
zIndexOffset: 1000
});
myTextLabel.addTo(map);
Got this code from here
If I understand correctly, you're looking to extend a GridLayer and its createTile method to display your data. Something like this, assuming a synchronous lookup
var map = L.map('map').setView([48.8583736, 2.2922926], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var GridInfo = L.GridLayer.extend({
// called for each tile
// return a DOM node containing whatever you want
createTile: function (coords) {
// create a div
var tile = document.createElement('div');
tile.className = "infotile";
tile.style.outline = '1px solid black';
// lookup the piece of data you want
// replace with whatever you use
var data = lookup(coords.x, coords.y, coords.z);
// let's add the lat/lng of the center of the tile
var tileBounds = this._tileCoordsToBounds(coords);
var center = tileBounds.getCenter();
tile.innerHTML = '<span>' + data+
'<br>'+
'lat:'+ center.lat+' '+'lng:'+center.lng+
'</span>';
return tile;
}
});
map.addLayer(new GridInfo());
And a demo
function lookup(x, y, z) {
return "x:"+x+", y:"+y+" at zoom "+z;
}
var map = L.map('map').setView([48.8583736, 2.2922926], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var GridInfo = L.GridLayer.extend({
// called for each tile
// returns a DOM node containing whatver ypu want
createTile: function (coords) {
// create a div
var tile = document.createElement('div');
tile.className = "infotile";
tile.style.outline = '1px solid black';
// lookup the piece of data you want
var data = lookup(coords.x, coords.y, coords.z);
// let's add the lat/lng of the center of the tile
var tileBounds = this._tileCoordsToBounds(coords);
var center = tileBounds.getCenter();
tile.innerHTML = '<span>' + data+
'<br>'+
'lat:'+ center.lat+' '+'lng:'+center.lng+
'</span>';
return tile;
}
});
map.addLayer(new GridInfo());
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
.infotile {display: flex;}
.infotile span {
font-weight: bold;
margin: auto;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<div id='map'></div>
Related
I am working on modifying the Leaflet SVG renderer for some cosmetic changes, but I have not been able to get even the most basic extension to work (even without any custom code aside from changing things like create() to L.DomUtil.create()).
here is my most simple example setup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
body{
padding: 0;
margin: 0;
}
#mapid{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="mapid" style=""></div>
<script>
L.SVG.test = L.SVG.extend({
_initPath: function(layer){
const path = layer._path = L.DomUtil.create('path');
// #namespace Path
// #option className: String = null
// Custom class name set on an element. Only for SVG renderer.
if(layer.options.className){
path.classList.add(...L.Util.splitWords(layer.options.className));
}
if(layer.options.interactive){
path.classList.add('leaflet-interactive');
}
this._updateStyle(layer);
this._layers[L.Util.stamp(layer)] = layer;
},
_updateStyle: function(layer){
const path = layer._path,
options = layer.options;
if(!path){
return;
}
if(options.stroke){
path.setAttribute('stroke', options.color);
path.setAttribute('stroke-opacity', options.opacity);
path.setAttribute('stroke-width', options.weight);
path.setAttribute('stroke-linecap', options.lineCap);
path.setAttribute('stroke-linejoin', options.lineJoin);
if(options.dashArray){
path.setAttribute('stroke-dasharray', options.dashArray);
} else {
path.removeAttribute('stroke-dasharray');
}
if(options.dashOffset){
path.setAttribute('stroke-dashoffset', options.dashOffset);
} else {
path.removeAttribute('stroke-dashoffset');
}
} else {
path.setAttribute('stroke', 'none');
}
if(options.fill){
path.setAttribute('fill', options.fillColor || options.color);
path.setAttribute('fill-opacity', options.fillOpacity);
path.setAttribute('fill-rule', options.fillRule || 'evenodd');
} else {
path.setAttribute('fill', 'none');
}
}
});
var testRenderer = new L.SVG.test();
var map = L.map('mapid', {preferCanvas: false, renderer: testRenderer}).setView([51.505, -0.09], 13);
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
], {fillOpacity: 0.5}).addTo(map).bindPopup("I am a polygon.");
L.circle([51.508, -0.11], 500, {fillOpacity: 0.5}).addTo(map).bindPopup("I am a circle.");
</script>
</body>
</html>
It does not throw any errors in the console and I really don't know where to go from here.
Inspecting the dom shows that the layers exist in the svg tag and that they have coordinates, but the g element does not seem to have any height.
what am I doing wrong?
I'm trying to create a custom overlay that covers a large part of the world map (ideally the whole world - inside the overlay I want to use an SVG or canvas that would only uncover selected parts of the map). Here is an example that demonstrates my issue:
function initMap() {
const map = new google.maps.Map(
document.getElementById("map"), {
zoom: 1,
center: {
lat: 0,
lng: 0
},
}
);
const bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-20, -100),
new google.maps.LatLng(+20, 100)
);
class CustomOverlay extends google.maps.OverlayView {
bounds_
div_
constructor(bounds, image) {
super();
this.bounds_ = bounds;
this.div_ = null;
}
onAdd() {
this.div_ = document.createElement("div");
this.div_.style.width = '100%'
this.div_.style.height = '100%'
this.div_.style.position = "absolute";
this.div_.style.background = "red"
const panes = this.getPanes();
panes.overlayLayer.appendChild(this.div_);
}
draw() {
const overlayProjection = this.getProjection();
const sw = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getSouthWest()
);
const ne = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getNorthEast()
);
if (this.div_) {
this.div_.style.left = sw.x + "px";
this.div_.style.top = ne.y + "px";
this.div_.style.width = ne.x - sw.x + "px";
this.div_.style.height = sw.y - ne.y + "px";
}
}
onRemove() {
if (this.div_) {
(this.div_.parentNode).removeChild(this.div_);
this.div_ = null;
}
}
}
const overlay = new CustomOverlay(bounds);
overlay.setMap(map);
}
window.initMap = initMap;
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Rectangle Zoom</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly" defer></script>
</body>
</html>
The problem is: whenever I zoom into an area in the eastern part of the red rectangle (Sri Lanka, Malaysia) the overlay disappears.
When I zoom out and pan the map I can see that the overlay is not disappearing - it's just moving to the next "repeated copy" of the map to the east.
How can I prevent this from happening?
Here are some of my ideas, but I can't find a way to implement any of them:
Disabling map repeating (only show one world map) - restricting the scrolling area doesn't fix the problem, I've tried
Locking my overlay to the correct "copy" of the map or show it on every "copy"
Using something different than a custom overlay (a polygon or rectangle won't work because I want to put an image or custom HTML element inside the map)
EDIT: I've just posted this issue on the Google Issue Tracker - here
I've created a fiddle example here where anyone can check my problem.
That problem is that when two overlays (built with a svg element and a path inside it) are too close, i.e, side by side, and both shapes have irregular limits, then the last shape rendered is overlapping the first one.
Visually you can't appreciate it, but if you add, e.g., a click event to the path dom elements to show their names, the last rendered shape is clickable in al its region, but the first one is not entirely clickable. The marked region in the following picture is not clickable for the bottom picture but it should be:
There is a css rule to change the cursor when it is over a path. You can also see that in the specified region the cursor does not change.
How can I avoid this overlapping? What I want is to do the bottom shape entirely clickable.
Finally I tried to find another solution like getting all elements under the mouse position and determine which path was, at that moment, under the pointer, and execute the action on it. I was looking for a way to implement this solution and I found this post: solution!!, where there is just what I needed.
I think it is the best and more elegant way (at least better than I thought before) to solve my issue. Basically it adds the css rule pointer-events: none; to the top svg element which is blocking other path elements. And to the pathobjects I have added pointer-events: all;. So the css styles should look like this:
svg.overlay {
pointer-events: none;
}
svg.overlay > path {
pointer-events: all;
}
The entire solution (you can see it also in a jsfiddler example):
function initialize() {
var myLatLng = new google.maps.LatLng(42, -111.02783203125);
var mapOptions = {
zoom: 6,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//polygon coords for Utah
var path = [
new google.maps.LatLng(41.983994270935625, -111.02783203125),
new google.maps.LatLng(42.00032514831621, -114.01611328125),
new google.maps.LatLng(36.96744946416931, -114.01611328125),
new google.maps.LatLng(37.00255267215955, -109.0283203125),
new google.maps.LatLng(40.97989806962013, -109.0283203125),
new google.maps.LatLng(41.0130657870063, -111.02783203125)
];
// custom overlay created
var overlay = new BW.PolyLineFill(path, map, 'red', '#000', 'original');
// polygon coords for conflict shape
var pathConflict = [
new google.maps.LatLng(42.00032514831621, -114.01611328125),
new google.maps.LatLng(41.983994270935625, -111.02783203125),
new google.maps.LatLng(41.0130657870063, -111.02783203125),
new google.maps.LatLng(40.97989806962013, -109.0283203125),
new google.maps.LatLng(47.00255267215955, -109.0283203125),
new google.maps.LatLng(46.96744946416931, -114.01611328125)
];
var overlayConflict = new BW.PolyLineFill(pathConflict, map, 'white', '#000', 'conflict');
}
///Start custom poly fill code
PolyLineFill.prototype = new google.maps.OverlayView();
function PolyLineFill(poly, map, fill, stroke, name) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < poly.length; i++) {
bounds.extend(poly[i]);
}
//initialize all properties.
this.bounds_ = bounds;
this.map_ = map;
this.$dom = null;
this.poly_ = poly;
this.polysvg_ = null;
this.fill_ = fill;
this.stroke_ = stroke;
this.name_ = name;
// Explicitly call setMap on this overlay
this.setMap(map);
}
PolyLineFill.prototype.onAdd = function() {
//createthe svg element
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttributeNS(null, "preserveAspectRatio", "xMidYMid meet");
var def = document.createElementNS(svgns, "defs");
//create the pattern fill
var pattern = document.createElementNS(svgns, "pattern");
pattern.setAttributeNS(null, "id", "lineFill-" + this.name_);
pattern.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
pattern.setAttributeNS(null, "patternTransform", "rotate(-45)");
pattern.setAttributeNS(null, "height", "7");
pattern.setAttributeNS(null, "width", "7");
def.appendChild(pattern);
var rect = document.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "id", "rectFill");
rect.setAttributeNS(null, "fill", this.fill_ || "red");
rect.setAttributeNS(null, "fill-opacity", "0.3");
rect.setAttributeNS(null, "stroke", this.stroke_ || "#000");
rect.setAttributeNS(null, "stroke-dasharray", "7,7");
rect.setAttributeNS(null, "height", "7");
rect.setAttributeNS(null, "width", "7");
pattern.appendChild(rect);
svg.appendChild(def);
//add path to the div
var path = document.createElementNS(svgns, 'path');
path.setAttributeNS(null, 'fill', 'url(#lineFill-' + this.name_ + ')');
path.setAttributeNS(null, 'stroke', '#000');
path.setAttributeNS(null, 'stroke-width', '1');
path.setAttributeNS(null, 'pointer-events', 'all');
this.path_ = path;
svg.appendChild(this.path_);
svg.style.borderStyle = 'none';
svg.style.borderWidth = '0px';
svg.style.position = 'absolute';
svg.style.pointerEvents = 'none';
svg.setAttribute('class', 'polygon');
this.$dom = svg;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.$dom);
var dragging = false;
google.maps.event.addDomListener(this.path_, 'mousedown', function(evt) {
dragging = false;
});
google.maps.event.addDomListener(this.path_, 'mousemove', function(evt) {
dragging = true;
});
var _self = this;
// onclick listener
google.maps.event.addDomListener(this.path_, 'click', function(evt) {
if (dragging) {
return false;
}
alert('clicked on ' + _self.name_);
});
}
PolyLineFill.prototype.AdjustPoints = function() {
//adjust the polygon points based on the projection.
var proj = this.getProjection();
var sw = proj.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = proj.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var points = "";
for (var i = 0; i < this.poly_.length; i++) {
var point = proj.fromLatLngToDivPixel(this.poly_[i]);
if (i == 0) {
points += (point.x - sw.x) + ", " + (point.y - ne.y);
} else {
points += " " + (point.x - sw.x) + ", " + (point.y - ne.y);
}
}
return points;
}
PolyLineFill.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.$dom;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
this.path_.setAttributeNS(null, "d", 'M' + this.AdjustPoints() + 'z');
}
PolyLineFill.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
window.BW = {};
window.BW.PolyLineFill = PolyLineFill;
///end poly fill code
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.polygon: {
pointer-events: none;
}
.polygon > path {
cursor: pointer;
pointer-events: all;
}
.polygon > path:active {
cursor: -webkit-grabbing;
}
#map-canvas,
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="map-canvas"></div>
I have a very strange issue that seems to have appeared only recently. I haven't done any major code changes to the project in a while and none to the function in question in a long while.
So the problem, when I add more than one icon to Google Map using API, the icons are appearig on top of each other.
The strange thing is the labels are all correctly located but those use the same coordinates as the icons.
Here is the string that is passed to the function
1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 Wednesday, 14:00', 'Wellington Road, Horsehay, Hollybank', 'RESERVED', '0 KPH', 0
The function is
function AddClusterLocation(FID, latitude, longitude, Icon, ID, DateStamp, Location, Event, Speed, IgnitionStatus) {
if (objMap) {
var cssName = 'MarkerIgnitionOff';
switch (IgnitionStatus) {
case '1':
cssName = 'MarkerIgnitionOn';
break;
default:
cssName = 'MarkerIgnitionOff';
}
var adjustedIcon = new google.maps.MarkerImage(
Icon,
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(16, 16)
);
var objMarker = new MarkerWithLabel({
position: new google.maps.LatLng(latitude, longitude),
draggable: false,
raiseOnDrag: false,
icon: adjustedIcon,
map: objMap,
labelContent: ' ' + ID + ' ',
labelAnchor: new google.maps.Point(-8, -8),
labelClass: cssName, // the CSS class for the label
labelStyle: { opacity: 1.0 }
});
// Add Maker to array
objMakersArray.push(objMarker);
// Wrap the event listener inside an anonymous function
// then we immediately invoke and passes the variables to
(function (ID, DateStamp, Location, Event, Speed, Icon) {
google.maps.event.addListener(objMarker, 'click', function () {
if (!objInfoWindows) {
objInfoWindows = new google.maps.InfoWindow();
}
// Create Paragraph
var para1 = document.createElement('p');
var adiv = document.createElement('div');
adiv.style.cssText = 'width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 10pt; color: #000000;';
// var htmlstring = '<div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
var htmlstring = '<table>' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
htmlstring = htmlstring + '<tr><td style="width: 100px;"><strong>ID</strong></td><td style="width: 200px;">' + ID + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Date/Time</strong></td><td>' + DateStamp + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Location</strong></td><td>' + Location + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Event</strong></td><td>' + Event + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Speed</strong></td><td>' + Speed + '</td></tr></table>'
// htmlstring = htmlstring + '</div>';
adiv.innerHTML = htmlstring;
// para1.innerHTML = htmlstring;
para1.appendChild(adiv);
// Zoom In DIV
var aDiv = document.createElement('div');
aDiv.style.width = "100px";
aDiv.style.float = 'left';
// Zoom In
var alink = document.createElement('a');
alink.innerHTML = 'Zoom In';
alink.href = '#';
alink.onclick = function () {
objMap.setCenter(objMarker.getPosition());
zoomLevel = objMap.getZoom();
if (zoomLevel != 21) {
objMap.setZoom(zoomLevel + 1);
}
return false;
};
aDiv.appendChild(alink);
// Zoom OUT DIV
var bDiv = document.createElement('div');
bDiv.style.width = '100px';
bDiv.style.float = 'left';
// Zoom In
var blink = document.createElement('a');
blink.innerHTML = 'Zoom Out';
blink.href = '#';
blink.onclick = function () {
objMap.setCenter(objMarker.getPosition());
zoomLevel = objMap.getZoom();
if (zoomLevel != 0) {
objMap.setZoom(zoomLevel - 1);
}
return false;
};
bDiv.appendChild(blink);
// Add Favourite Div
var cDiv = document.createElement('div');
cDiv.style.float = 'right';
cDiv.style.width = '150px';
// Add Favourite
var clink = document.createElement('a');
clink.innerHTML = 'Add to Favourite';
clink.href = '#';
clink.onclick = function () {
position = objMarker.getPosition();
Pane = window.parent.ASPxSplitterDefault.GetPaneByName('PaneDisplay');
if (Pane) {
Pane.SetContentUrl('../Pages/FavouritePage.aspx?latitude=' + position.lat() + '&longitude=' + position.lng(), true);
}
return false;
};
cDiv.appendChild(clink);
var para2 = document.createElement('p');
para2.appendChild(aDiv);
para2.appendChild(bDiv);
para2.appendChild(cDiv);
// Create Master Div to hold everything
var masterDiv = document.createElement('div');
// Get name of DIV that has Atlas
var objDiv = objMap.getDiv();
var divName = objDiv.id;
// Bind to mapping Div
document.getElementById(divName).appendChild(masterDiv);
// Info Div
var infoDiv = document.createElement('div');
infoDiv.style.float = 'left';
infoDiv.style.width = '350px';
infoDiv.appendChild(para1);
infoDiv.appendChild(para2);
masterDiv.appendChild(infoDiv);
// Creating the div that will contain the detail map
var detailDiv = document.createElement('div');
infoDiv.style.float = 'right';
detailDiv.style.width = '200px';
detailDiv.style.height = '200px';
masterDiv.appendChild(detailDiv)
// Setting up small map
// Creating MapOptions for the overview map
var overviewOpts = {
zoom: 14,
icon: adjustedIcon,
center: objMarker.getPosition(),
mapTypeId: google.maps.MapTypeId.HYBRID,
disableDefaultUI: true
};
var objdetailMap = new google.maps.Map(detailDiv, overviewOpts);
// Create a marker that will show in the detail map
var objdetailMarker = new google.maps.Marker({
position: objMarker.getPosition(),
map: objdetailMap,
icon: adjustedIcon,
clickable: false
});
// Setting the content of the InfoWindow
objInfoWindows.setContent(masterDiv);
// Tying the InfoWindow to the marker
objInfoWindows.open(objMap, objMarker);
});
})(ID, DateStamp, Location, Event, Speed, Icon);
objMarker = null;
}
}
The function that would call this would be
function OnCurrentPosition(arg) {
if (arg == null) {
parent.location = '../Security/Login.aspx';
}
if (arg) {
var latitude, longitude
var arrayList = arg.split(";");
alert(arg);
for (i = 0; i < arrayList.length; i++) {
if (arrayList[i].length) {
var arrLocation = arrayList[i].split("$")
AddClusterLocation(arrLocation[0], arrLocation[1], arrLocation[2], arrLocation[3], arrLocation[4], arrLocation[5], arrLocation[6], arrLocation[7], arrLocation[8], arrLocation[9]);
SetBounds(arrLocation[1], arrLocation[2]);
latitude = arrLocation[1];
longitude = arrLocation[2];
}
}
CreateClusterer();
if (flgLockMapToBounds == false) {
if (objMakersArray.length == 1) {
SetMapCentre(latitude, longitude, 14);
}
else {
ZoomToExtend();
}
}
}
}
arg = 1344$52.65665917$-2.49004717$../Images/Icons/Direction/container_blueN.ico$Galahad$2014 Mar 05 Wednesday, 14:00$Wellington Road, Horsehay, Hollybank$RESERVED$0 KPH$0$0.00000000$0.00000000$0;1342$52.65582367$-2.48958417$../Images/Icons/Direction/container_yellowN.ico$Gwinevere$2014 Mar 05 Wednesday, 14:00$Woodlands Lane, Horsehay, Coalbrookdale$RESERVED$0 KPH$0$0.00000000$0.00000000$0;
I'm really at a lost to explain this as the labels are correct, I've checked the latitude and longitude and its different each time the function is called. Plus this was working, only spotted by customer yesterday that it wasn't.
Here's the API that I use
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
Thank you for reading the question, hopefully you be able to help!
Jim
There is an issue with the MarkerWithLabel library. Issue.
MarkerWithLabel v1.1.10 stopped working for me recently after Google Maps Api's experimental version became v3.18. I had Maps API set to "...maps/api/js?v3&..." which by default picks latest experimental version (currently v3.18). By fixing the version to v3.17 MarkerWithLabel worked fine.
So, my question is - I have a small map on my page and I want open this map in a full screen on the same page by pressing a button and close it in the same way. I think it can be done by removing div styles when you press the button but I didn't succeed, may be this is a wrong way? I understand that is a simple question but my google skills aren't well developed and I just don't know how to ask this question properly, so I'm asking here.
My code is simply generated by GoogleMapsTileCutter plus I've added some code from here for limit panning. This is all code that I have done.
<!DOCTYPE html>
<html lang="en">
<head>
<title>PS_Bramus.GoogleMapsTileCutter</title>
<meta charset="utf-8" />
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width:100%;
height:100%;
color: #CCC;
background: #EFEFEF;
}
span.loading {
display: block;
text-align: center;
font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
}
</style>
</head>
<body>
<div id="map"><span class="loading">loading tiles...</span></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
/*
* = PS_Bramus.GoogleMapsTileCutter Config
* ----------------
*/
var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false
/*
* Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
* ----------------
*/
function getNormalizedCoord(coord, zoom) {
if (!repeatOnXAxis) return coord;
var y = coord.y;
var x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
// don't repeat across Y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across X-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
/*
* Main Core
* ----------------
*/
window.onload = function() {
// Define our custom map type
var customMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
} else {
return 'empty.jpg';
}
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 5,
name: 'PS_Bramus.GoogleMapsTileCutter'
});
// Basic options for our map
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
streetViewControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
}
};
// Init the map and hook our custom map type to it
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.mapTypes.set('custom', customMapType);
map.setMapTypeId('custom');
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-47,-95.61),
new google.maps.LatLng(47,95.61)
);
var lastValidCenter = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
if (allowedBounds.contains(map.getCenter())) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
// not valid anymore => return to last valid position
map.panTo(lastValidCenter);
});
}
</script>
</body>
If it's a matter of simply resizing your map div, then the following JavaScript should lead you in the right direction:
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.style.height = 100%;
myMap.style.width = 100%;
}
Note that the percentages are only relative to ancestor elements of your map div.
Then you'd map your buttons onclick to the resizeMap() function and you're set!
If you wanted a jQuery approach, this is what the above code could look like:
function resizeMap() {
$("#map-canvas").css({height: 100%, width: 100%});
}
To revert the map back to its original width and height, you could first check if the width and height are set to 100%, then resize, but a more elegant solution would be to use a class instead of inline styles, which could resemble the following:
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.classList.toggle("fullscreen");
}
Then in your css you can have:
.fullscreen {
width: 100%;
height: 100%;
}
Clicking the button would just toggle between turning the class on and off.
Like this, the answers above do not work.
var mapOptions = {
center: myCenter,
zoom: 9,
fullscreenControl: true
};