We Keep Coding

Distorted display of Google Maps

What is wrong with my map?
Please go to gtob.openfile.ch/mitglieder, click on «A-Z», then on «Screenbox Multimedia Ltd.». Finally click on the button «Show map», than the same map is displayed in three div's. In the middle div, the map is distorted, and i can not find out why... (Responsive design is not finished now, please show with a screen-width of at least 1200 pixels)
Ok, here is the JavaScript/jquery for building the map:
var memberGoogleMapsData = new Object;
memberGoogleMapsData.mapContainer = $(this).closest('div').find('div.memberMap');
$(this).closest('div').find('button').on('click', function() {
memberGoogleMapsData.mapsPosLat = parseFloat(memberGoogleMapsData.mapContainer.data('mapsposlat'));
memberGoogleMapsData.mapsPosLng = parseFloat(memberGoogleMapsData.mapContainer.data('mapsposlong'));
memberGoogleMapsData.mapsZoom = parseInt(memberGoogleMapsData.mapContainer.data('mapszoom'));
memberGoogleMapsData.markerPosLat = parseFloat(memberGoogleMapsData.mapContainer.data('markerposlat'));
memberGoogleMapsData.markerPosLng = parseFloat(memberGoogleMapsData.mapContainer.data('markerposlng'));
memberGoogleMapsData.mapId = memberGoogleMapsData.mapContainer.prop('id');
memberGoogleMapsData.mapPos = new google.maps.LatLng(memberGoogleMapsData.mapsPosLat, memberGoogleMapsData.mapsPosLng);
memberGoogleMapsData.options = {
zoom: memberGoogleMapsData.mapsZoom,
center: memberGoogleMapsData.mapPos,
mapTypeId: google.maps.MapTypeId.HYBRID,
tilt: 0,
heading: 0
};
memberGoogleMapsData.myMap = new google.maps.Map(document.getElementById(memberGoogleMapsData.mapId),memberGoogleMapsData.options);
memberGoogleMapsData.myMap2 = new google.maps.Map(document.getElementById('testMap'),memberGoogleMapsData.options);
memberGoogleMapsData.myMap3 = new google.maps.Map(document.getElementById('testMap2'),memberGoogleMapsData.options);
});
In the div.memberMap I have data-Tags for providing the required data for building the google map:
<div class="memberMap" id="memberMap207" data-mapsposlat="47.50467769999999" data-mapsposlong="9.39942510000003" data-mapszoom="13" data-markerposlat="47.50467769999999" data-markerposlng="9.39942510000003">

You have the following style in the customer.css file
#members div.members img {
float: right;
max-width: 300px;
max-height: 150px;
}
Your first map is inside the div.members, so this style breaks all the tile images of the map as well.
The second map that is outside of div.members is not affected by this style.
I hope it helps!

Leaflet: using mouseover and opacity get a conflict

I created a function to mouse over a colorless layer and everything. So far so good, and also created a function to go back as it was before the mouse. But when I use the opacity, the reset function does not return to normal and leaves the opacity in the default state (0.7) and not in the state it is in at the moment.
Function to mouseouver:
function highlightFeature_stComerciais(e) {
layerStComerciais = e.target;
layerStComerciais.setStyle({
weight: 5,
color: '#666',
dashArray: ''
});
info.update(layerStComerciais.feature.properties);
}
function to mouseout
function resetHighlight_stComerciais(e) {
setoresComerciaisOverlay.resetStyle(e.target);
info.update();
}
opacity:
$('#sldOpacity').on('change', function(){
$('#image-opacity').html(this.value);
setoresComerciaisOverlay.setStyle({ fillOpacity: this.value })
});
The default opacity is 0.7, assuming I put 0 of opacity, when I do mouse over the Layer all right, but when I mouse out it returns to 0.7 and I do not want this. Why my reset doesnt work how I want? Thanks!

I guess you build your vector layers using GeoJSON data and L.geoJSON factory, that returns a Leaflet GeoJSON Layer Group.
The resetStyle method on that group re-applies the style that was applied at the time of creation of that group, or the default one if you did not provide style:
Resets the given vector layer's style to the original GeoJSON style, useful for resetting style after hover events.
If you later change the style of one or all of the vector layers in that group, it will be therefore overridden when you use resetStyle, and the initial style will be applied.
An easy workaround is simply to modify the GeoJSON Layer Group's style option as well. However, it will affect all its child layers.
group.options.style = newStyle;
Another solution would be to record the new style of each vector layer, and use that recorded value when you want to restore the previous state, instead of using the group's resetStyle method.
var map = L.map("map").setView([48.85, 2.35], 12);
var geojson = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [2.35, 48.85]
}
};
var point;
var startStyle = {
color: "red"
};
var newStyle = {
color: 'green'
};
var group = L.geoJSON(geojson, {
style: startStyle,
pointToLayer: function(feature, latlng) {
point = L.circleMarker(latlng);
assignStyle(point, startStyle);
return point;
}
}).addTo(map);
// Record the style to the individual vector layer if necessary.
function assignStyle(leafletLayer, newStyle) {
leafletLayer.setStyle(newStyle);
leafletLayer._recordedStyle = newStyle;
}
// When desired, apply the style that has been previously recorded.
function reassignStyle(leafletLayer) {
leafletLayer.setStyle(leafletLayer._recordedStyle);
}
document.getElementById('button').addEventListener('click', function(event) {
event.preventDefault();
// Either use the wrapper function that records the new style…
//assignStyle(point, newStyle);
// Or simply modify the group's style option, if it is acceptable affecting all child layers.
point.setStyle(newStyle);
group.options.style = newStyle;
});
group.on({
mouseover: function(e) {
e.target.setStyle({
color: 'blue'
});
},
mouseout: function(e) {
//reassignStyle(e.layer);
group.resetStyle(e.layer);
}
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet-src.js"></script>
<div id="map" style="height: 100px"></div>
<button id="button">Change color to Green…</button>
<p>…then mouseover and mouseout</p>

MapBox GL JS marker offset

I'm using MapBox GL JS to create a map with a custom marker:
var marker = new mapboxgl.Marker(container)
.setLngLat([
datacenters[country][city].coordinates.lng,
datacenters[country][city].coordinates.lat
])
.addTo(map);
However, I seem to have some kind of offset problem with the marker. The thing is: when zoomed out a bit, the bottom of the marker is not really pointing to the exact location:
When I'm zooming in a bit further it reaches its destination and it's pointing to the exact spot.
I really love MapBox GL, but this particular problem is bugging me and I'd love to know how to solve it. When this is fixed my implementation is far more superior to the original mapping software I was using.

From Mapbox GL JS 0.22.0 you're able to set an offset option to the marker. https://www.mapbox.com/mapbox-gl-js/api/#Marker
For example to offset the marker so that it's anchor is the middle bottom (for your pin marker) you would use:
var marker = new mapboxgl.Marker(container, {
offset: [-width / 2, -height]
})
.setLngLat([
datacenters[country][city].coordinates.lng,
datacenters[country][city].coordinates.lat
])
.addTo(map);

New solution for mapbox-gl.js v1.0.0 - Marker objects now have an anchor option to set the position to align to the marker's Lat/Lng: https://docs.mapbox.com/mapbox-gl-js/api/#marker
var marker = new mapboxgl.Marker(container, {anchor: 'bottom');
This should cover most cases and is more reliable than a pixel offset in my experience.

I've found an solution to my problem. It might be somewhat hacky, but it solves the positioning problem of the marker: I'm using a Popup fill it with a font awesome map marker icon and remove it's "tooltip styled" borders:
Javascript:
map.on('load', function() {
var container = document.createElement('div');
var icon = document.createElement('i');
icon.dataset.city = city;
icon.addEventListener('click', function(e) {
var city = e.target.dataset.city;
var country = e.target.dataset.country
flyTo(datacenters[country][city].coordinates);
});
icon.classList.add('fa', 'fa-map-marker', 'fa-2x');
container.appendChild(icon);
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
})
.setLngLat([
datacenters[country][city].coordinates.lng,
datacenters[country][city].coordinates.lat
])
.setDOMContent(container)
.addTo(map);
});
CSS:
.map div.mapboxgl-popup-content {
background: none;
padding: 0;
}
.map .mapboxgl-popup-tip {
display: none;
}
I just hope someone comes up with a real solution, because this feels kinda dirty to me. But hey: it does the job just fine!

Mapbox Marker now has an element option see this link Mapbox Marker. So instead of appending the icon HTML to the Div element you can simply add into the options when creating a marker. I found this also gets rid of the offset problem. So using the code above you can do this....
var icon = document.createElement('i');
icon.classList.add('fas', 'fa-map-marker-alt');
icon.style.color = 'blue';
new mapboxgl.Marker(container, {anchor: 'center', offset: [0, 0], element: icon})
Also the CSS for the marker can be updated to allow a pointer
.mapboxgl-marker {
border: none;
cursor: pointer;
}

Pins disappearing on bing maps when map is panned

I'm trying to produce a mapping application with Bing Maps with a button that will retrieve a JSON string and places pins on the map based on the center of the map.
That is working fine, but I'm running into two issues that I'm having trouble diagnosing.
The first is that when I move the map after placing the pins, the majority of them disappear from the map except for 1-3. I've figured out that the pins are still being held in map.entities, but just aren't all displaying.
The second issue is that I have a click event on the pins, and sometimes when I click on a pin it will disappear (and sometimes reappear elsewhere on the map).
Here is my code:
function addPin() {
map.entities.clear();
var pinImg = "images/MapPin.jpg";
var latLong = {};
var name;
for (var i = 0; i < factualJson.response.data.length; ++i) {
latLong['latitude'] = factualJson.response.data[i].latitude;
latLong['longitude'] = factualJson.response.data[i].longitude;
name = factualJson.response.data[i].name;
var pin = new Microsoft.Maps.Pushpin(latLong, {
icon: pinImg,
anchor: new Microsoft.Maps.Point(latLong['latitude'], latLong['longitude']),
draggable: true,
width: 48,
height: 48
});
Microsoft.Maps.Events.addHandler(pin, 'click', displayName);
pin.title = name;
pin.id = 'pin' + i;
map.entities.push(pin);
}
document.getElementById("arrayLength").innerHTML = "Number of locations: " + map.entities.getLength();
}
function displayName(e) {
document.getElementById("name").innerHTML = "";
if (this.target.id != -1) {
document.getElementById("name").innerHTML = this.target.title;
}
}
function boot() {
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', { callback: getMap });
}
function getMap() {
map = new Microsoft.Maps.Map($gel("bingMap"), {
credentials: getKey(),
customizeOverlays: true,
enableClickableLogo: true,
enableSearchLogo: true,
showDashboard: true,
showBreadcrumb: true,
showCopyright: true,
zoom: 10,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden
});
setGeoLocation();
//setTimeout(optimizeMap, 100);
window.onresize = resizeWin;
resizeWin();
}
Currently I make an ajax call from the button, and the callback function calls 'AddPin' which adds the pins to the map. I thought I'd add in the map initialization code in case it was relevant. Currently boot() is called on body load.

For me the solution was similar to yours #canadian coder
Microsoft.Maps.Location() only accepts float values, no strings and Int.
I use MVC architecture and passed a string using a model. Later i converted that string to float and passed to Location.
Problem solved.
var pushpin = new Microsoft.Maps.Pushpin(
center, { icon: '/Content/BingPushpin.png', width: 50, height: 50, draggable: false });
pushpin.setLocation(new Microsoft.Maps.Location
(parseFloat(#Model.Latitude) , parseFloat(#Model.Longitude)));
dataLayer.push(pushpin);
locations.push(new Microsoft.Maps.Location
(parseFloat(#Model.Latitude) , parseFloat(#Model.Longitude)));
EDIT :
Later found out that problem still exist. Another reason can be that you are calling that Map to load twice. So check for any other instance of the map which is being loaded. In my case see below.
$(document).ready(function () {
loadSearchModule(); //calling Map to Load at a div without pushpins
//code to do something
getMapOnLocation();
}
function getMapOnLocation()
{//code to display map with pushpin
}
In the Above example I was telling the control to load my map with PushPins and when the page is fully Loaded load the map without pushpins.
Hope this helps :)

As always I need to ask the question before I figure it out myself.
The issue was that I needed to push a Microsoft location object into the pin and not an object. Like so:
var loc = new Microsoft.Maps.Location(47.592, -122.332);
And NOT my latLong object.
This also seemed to fix the issue of disappearing pins on click event.

Openlayers / Openstreetmap background is vertically striped and squished

So the background of my openlayers implementation appears to be squished into vertical stripes. The weird thing is that it wasn't always like this but even when I stash all my changes back to a point where I know it was working, it still is broken. It makes me wonder if perhaps something has changed about the way the tile assets are being delivered. I have tried switching between using osm and wms layers with no change, any help would be appreciated.
Here is the pertinent code:
initMap: function() {
var view = this;
var map = this.map = new OpenLayers.Map();
map.render(this.$map[0]);
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
var osmLayer = new OpenLayers.Layer.OSM();
this.layers = {
point: new OpenLayers.Layer.Vector("Point Layer"),
line: new OpenLayers.Layer.Vector("Line Layer"),
polygon: new OpenLayers.Layer.Vector("Polygon Layer")
};
this.setValue(this.value);
map.addLayers([this.layers.point, this.layers.line, this.layers.polygon, osmLayer]);
drawControls = {
point: new OpenLayers.Control.DrawFeature(this.layers.point,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(this.layers.line,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(this.layers.polygon,
OpenLayers.Handler.Polygon)
};
this.layers[this.layerType].events.on({'sketchcomplete': function(feature) {
if (!view.multiple) {
// deactivate polygon layer once a polygon has been added
drawControls[view.layerType].deactivate();
}
}});
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
if (this.layers[this.layerType].features.length) {
var bounds = this.layers[this.layerType].getDataExtent();
var zoom = this.layers[this.layerType].getZoomForExtent(bounds);
var lon = (bounds.top - bounds.bottom) / 2;
var lat = (bounds.right - bounds.left) / 2;
map.setCenter(new OpenLayers.LonLat(lon,lat), 3);
map.zoomToExtent(bounds);
if (view.multiple) {
drawControls[view.layerType].activate();
}
} else {
map.setCenter(new OpenLayers.LonLat(-11174482.03751,4861394.9982606), 4);
drawControls[view.layerType].activate();
}
this.$('.clear').click(function(e) {
e.preventDefault();
view.layers[view.layerType].destroyFeatures();
drawControls[view.layerType].activate();
});
},
Here is the output:

So I found the problem. Twitter bootstrap has a line in its reset file that sets:
img { max-width: 100% }
This was squishing the images. You can fix it by doing:
img { max-width: none; }

I was having the same problem, are you using bootstrap of twitter?
I found out there was a selector for img elements that was affecting the map. I had the next selector into the bootstrap.css"
img {
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
I don't know whay the parameter max-width: 100%; makes the vertical stripes in my case. I remove the propertie max-width: 100% and now is working.

Setting img { max-width: 100% } to img { max-width:none; } does resolve the problem.
However this will have an unintended effect on images throughout your website. I am also using Bootstrap Twitter's carousel component for images and when I made the above changed the images did not fit in the carousel. Therefore I changed it so that it only targets the images in the OpenLayers / OpenStreetMap div.
div#outlet_map img { max-width:none; }