We Keep Coding

LeafletJS rendering with squashed tiles

I'm using LeafletJS to display maps in a number of places on my site.
In most cases, it is working fine, but on one specific page I am getting a weird rendering glitch, which looks like this:
As you can see, the map is rendering with vertical grey bars at each tile boundary. Additionally, if I add markers to the map, they also display squashed.
The weird thing is that I'm using the same code (ie the exact same JS file) to render similar maps on other pages without any problems. I'm also using similar code to render two other maps on the same page, again without problems.
The JS code looks like this:
(function(L) {
var element = document.querySelector('.details-map');
if (!element) { return; }
var coords = element.getAttribute('data-coords');
var latlng = coords.split(',');
var location = {lat: parseFloat(latlng[0]), lng: parseFloat(latlng[1])};
var zoom = element.getAttribute('data-zoom');
var map = new L.Map(element, {center: location, zoom: zoom, gestureHandling: true});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(map);
})(L);
And the associated HTML looks like this:
<div class="details-map" data-coords="51.5216,-0.71998" data-zoom="14"></div>
The rendering glitch occurs at all zoom levels and persists after the doing things like map.invalidateSize() to force a redraw.
Can anyone explain why I'm getting this glitch and how to fix it? Thank you.

After much digging, I finally resolved this.
The problem was some CSS that was linked to an element some distance further up the DOM tree, and not really relevant to the map. It looks like this:
.local-branch img {
vertical-align: top;
display: inline-block;
width: 25%;
padding: 0 10px;
}
The intention of this CSS is to lay out a set of images related to the branch. The map is being added later as part of the branch details, within the .local-branch element. The styles are obviously not intended to apply to the map, but are applying anyway as the CSS selector is too broad.
I'll need to find a way to fix it that doesn't break the existing image layout, which still needs some thought, but at least I've worked out what was going on, so the mystery is solved.

OpenLayers 3 can´t use Tile and Vector layer class

Im having this problem.
Im making a map with openlayers 3. I have a layerswitcher with a group of tile class layers, and it works perfectly until I try to remark with a mousover the diferent layers, so the user can know that he can click on them to get feature info. Something like this https://openlayersbook.github.io/ch06-styling-vector-layers/example-08.html.
The problem is I need the layers in ol.layer.Vector class, and i was using ol.layer.Tile, so I had to update the ol3 that i was using v3.7.0 to the v3.16.0, and if I use only ol.layer.Vector class works, but I need both of them, and using both, the layers appear, but such for a moment.. then the background covers it.. like a load problem. I thought it was a ccs problem, but no, its the new js.
Summarizing, my problem is that the layers in tile class overlap with the layers in vector class, and the map only show me one, or none.
If anybody can help me I will be greatful.
Thanks!

The example you linked above only works with OpenLayers < v3.7.0, because it uses ol.FeatureOverlay. You have to replace that with ol.layer.Vetcor. See the v3.7.0 release notes for upgrade instructions. Once you have that, it should be easy to add tile layers. Just make sure that you add them to the map before you add a vector layer. Something like
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
countries
],
view: view
});

Custom Google Maps

In my HTML page instead of using:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.489021, -0.1164075),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
I'd like to use a Custom Map I've created.
https://www.google.com/maps/d/edit?mid=zd34x9vOEi3A.kNJZAfpCCD80
But I don't want to embed the map into my page, I want to do the styling on the HTML page. Is this possible?

Well, depending on what kind of customizing you want to perform on your page, you can include the Google Maps JavaScript API 3 in your page. This will allow you various customization from adding custom markers, adding images, to calculating and drawing directions. There are even helpful examples, so I'd say it's a great start to add a custom google map to your html.

Cannot add a standard map marker to a google map with heatmap layer

I have a map with a heatmap utilizing the google visualization heatmap layer
jsfiddle here
If I try and add a normal map marker it fails with an uncaught type error somewhere in the google api.
The marker.setMap(map) line seems to happen, (inspecting the marker, it has a map property) but whatever this triggers on the map itself seems to fall over.
I've tried unsetting the heatmap layer before setting the marker, even tried not initialising the heatmap layer with the same results.
I'm beginning to think that by including the visualisation library I am losing the ability to add a map marker. If this is the case has anyone come across a workaround?

You initially create the marker without a map-property, currently the marker will appear when you click somewhere (not only on the marker), because the lnk-variable will be set to document, not to the link:
var lnk = $(document, '.marker_toggle')
but it should be only:
var lnk = $('.marker_toggle')
Demo: http://jsfiddle.net/doktormolle/Avxap/

How to place multiple icons for Google map markers in v3?

I'm trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.
Using the icon and shadow MarkerOptions doesn't seem to accomplish this because a markers shadow falls behind other markers icons.

You can use an excellent little library, RichMarker. Its documentation is here.
To make usage easier, you can even create your own custom marker class, something like this:
Ns.Marker = function(properties) {
RichMarker.call(this, properties);
this.setContent('<div class="three-images-marker">' +
properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' +
properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
'</div>');
};
Ns.Marker.prototype = Object.create(RichMarker.prototype);
// and use it like this:
var yourFramedMarker = new Ns.Marker({
position: yourMarkerLatlng,
map: yourMap,
NsImage: 'example.com/image.png',
NsFrameImage: 'example.com/frame.png',
});
'Ns' is whatever namespace you use, if you do.
From here on it's CSS work, you can position the images as you like.

I think you'll have to merge the images with the marker backgrounds. When I was building something similar I used CSS sprites and calculated the vertical offset (vPos), based on a standard height. I just didn't bother with the shadows.
var mImage = new google.maps.MarkerImage("YOURMARKER.png",
new google.maps.Size(34, 35),
new google.maps.Point(0, vPos),
new google.maps.Point(10, 34)
);
//insert marker
marker = new google.maps.Marker({
icon: mImage,
position: new google.maps.LatLng(latitude, longitude),
map: map
});

yes, marker shadows are all placed in the separate layer - below all markers. You have to merge the background and photo into one icon image, or create a new class which would inherit from MarkerImage.