norkart / leaflet-minimap Goto Github PK
View Code? Open in Web Editor NEWA minimap control plugin for Leaflet
License: BSD 2-Clause "Simplified" License
A minimap control plugin for Leaflet
License: BSD 2-Clause "Simplified" License
Hi,
thanks for your great plugin - I plan to add this to one of the next releases of my plugin mapsmarker.com (plus an integrated settings panel to set the available options).
Just one question which I couldnt figure out quickly: is it possible to launch the minimap minimized? (as google does it?)
I tried changing the following function to true, but with no success:
_addToggleButton: function () {
this._toggleDisplayButton = this.options.toggleDisplay ? this._createButton(
'', 'Hide', 'leaflet-control-minimap-toggle-display', this._container, this._toggleDisplay, this) : undefined;
this._minimized = true;
},
can you please help here?
Thx,
Robert
If you look at this CodePen I created: http://codepen.io/DrYSG/pen/ICzro , you will notice that the base map (at zoom level 5) and the miniMap (zoom level 0) work fine.
But it if you zoom in a level, so that the mini-map goes to zoom level 1, then the mini-map gets confused. Zooming in further will make it get back to the correct location.
The big map does not lose its place.
This is only with LL84 (EPSG4326) mapping, which I know is a bit of a confusion in Leaflet, but they do claim support for that CRS: http://leafletjs.com/reference.html#icrs
maybe the zoomlevel of minimap should change, too, on mainmap change...
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library Norkart/Leaflet-MiniMap
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "Norkart/Leaflet-MiniMap",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
We have noWrap set to true for our map, so I had to do the same for the minimap. The minimap box will still let me scroll past the end of the map though. Needs something that stops that from happening.
Hi Robert,
first thanks a lot for the new release - will update my plugin with the next release. As backward compatibility for IE8 is an issue for me, I have searched and found a workaround, so that when the minimap is viewed with IE8, at least the PNG icon and not an empty control is displayed.
old
´´´.leaflet-control-minimap-toggle-display{
background-image: url("images/toggle.svg");
background-size: cover;
position: absolute;
border-radius: 3px 0px 0px 0px;
}´´´
new
´´´.leaflet-control-minimap-toggle-display{
background-image: url("images/toggle.svg");
background-image:url(images/toggle.png)\0; /workaround for IE8/
background-size: cover;
position: absolute;
border-radius: 3px 0px 0px 0px;
}´´´
background infos:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
https://stackoverflow.com/questions/5852681/target-ie9-or-ie8-but-not-both-using-css
https://stackoverflow.com/questions/660652/ie8-css-selector
let me know if that would work for you too!
best,
Robert
Reproduction:
Mainmap zoom = X_0
Minimap zoom = Y_0
Mainmap minimum zoom = X_0
Minimap minimum zoom = Y_0
Zoom offset from mini to main = K
If the map is set up with X_0 < K + Y_0, and X_0 <= X <= K + Y_0, then moving the reticule in the minimap to move the map centre will cause the main map zoom to be reset to K + Y_0.
(Substitute the numbers in the original bug comment for a real-world example.)
I believe I'm seeing a similar problem.
My theory on what's going on...
Initially you set the zoom to 2. MiniMap attempts to offset by -5, which is -3. As 0 is the minimum it uses that instead.
Now when you call addTo that calls setView on the _miniMap. This will fire a moveend event, which calls _onMiniMapMoved. In there is this line:
this._mainMap.setView(this._miniMap.getCenter(), this._decideZoom(false));
In _decideZoom things go horribly wrong because it uses the current _miniMap zoom of 0 to calculate the new zoom of the _mainMap, offset by +5. Hence it jumps to 5.
The problem isn't limited to initialization. In general I find moving around the MiniMap quite treacherous for zoom levels less than 5. The official example dodges this problem by having a minimum of 5.
Hi @Norkart not really an issue but i think we can delete vendor prefix for border-raduis in plugin's css since http://caniuse.com/#search=border-radius :
https://github.com/Norkart/Leaflet-MiniMap/blob/master/src/Control.MiniMap.css#L5
++
First of all congratulations,
Would it be posible to put into another div the minimap?
I say: one div for the main map and into another div the minimap
Thank you
Hi there,
it would be nice to have the option to disable zoomon the minimap. Everytime I scroll over the map with my mouse (i.e I scroll down the page and my pointer happens to come over the minimap), the minimap changes zoom and the big map obviously too.
I also would like to be able to disable "dragging" the map.
Thanks,
Sascha
The toggle icon does not show in the correct place, or with the correct orientation for all but the lower left corner of the map. Example
A user of my plugin www.mapsmarker.com uses leaflet maps in woocommerce tabs, which forced me to add a workaround to invalidateSize() of the map on tab change and initial load.
See http://www.nebbiolowijn.nl/winkel/product/salice-salentino-albarossa/ for an example: the map shows correclty, but the minimap would also
neet to get to be reloaded by invalidateSize().
Unfortunately I didnt find out how to do so with the minimap plugin - I tried adding the following private method, but that didnt work:
_invalidateSizeMinimap: function (map) {
this._miniMap.invalidateSize();
return this;
},
Can anyone please help here and tell me how this can be achieved?
I'm using this plugin on a map that also uses a layers control to switch between basemaps. Is there a way to change the basemap on the miniMap when the main map basemap changes? The two maps communicate just fine, I just want them to look the same. All of the examples I have seen so far do not have this feature, but is it possible? Has anyone else tried?
as new feature, I added a changeLayer method to manage the change of the minimap layer when the main map layer change:
changeLayer: function (layer) {
this._miniMap.removeLayer(this._layer);
this._layer = layer;
this._miniMap.addLayer(this._layer);
},
Rob,
Thank you for being patient. I have continued to work on my CodePen demo to get the the heart of the problem. Why? Certainly not to bother you, since I think you have done a great service creating this plug-in.
But something did not ring true, when about the suggesting that issue #33 was due to delayed tile response (jquery promise) from the IndexedDB. Why? well Leaflet is designed for all tiles to be returned async from web services. So the mere fact that tiles are coming back async should not effect things such as bounding boxes, zoom, etc. (this is just about splatting bits on the screen, a purely visual effect).
So I created a more minimal demo, CRS3857, with TileLayers from CloudMade, and I am seeing the same errors:
http://codepen.io/DrYSG/pen/ICzro
I am really shooting in the dark now as to what the problem is:
There are no other controls, that I can see (other than the zoom), so what do you think is causing this. Given that the symptom is the same as with Functional and IDB, I am thinking there is something more basic at fault (and I don't rule out how I am setting up the MiniMap).
It would be nice to be able to have more control over the aiming rectangle in the minimap (such as color).
Also, at low minimap zoom levels, the aiming rectangle can become almost invisible. It might be nice to be able to specify a minimum diagonal pixel size (even if it did not strictly match the parent map boundaries)
See the comment on issue #7 (comment) . Probably need to work initialisation in there somewhere.
Hi all,
I have had in minimap control the same problem I have had in my regualr map: Leaflet/Leaflet#2157
I have applied the same kind of CSS modification you read here Leaflet/Leaflet#2078 and I have added this code to Control.MiniMap.css:
.leaflet-control-minimap img {
-webkit-backface-visibility: hidden;
}
Best regards,
Andrea
A use case we have not considered before is when someone uses Leaflet to display large high-resolution images, they might like to use the minimap for a navigational window. Then the current behaviour of having a fixed size map window and centering the map is less ideal. Rather, we should do this:
There may of course also be use cases with geographical information where someone might like this behaviour. There will probably be some challenges in adapting the current architecture in order to allow these two rather different modes of operation.
Right now nothing is actually built, so there's not much to improve there, but since we've started tagging releases like real professionals there is kind of a pipeline:
As we all know, having more than one manual step in a releasing process is utter evil and must be destroyed, so we should look at ways of automating it. We could possibly set up an actual build system while we're at it, to manage complexity and create minified versions.
I use StamenTileLayer
and to use this I init:
baseLayer = new L.StamenTileLayer("toner", {
...
});
Which uses the Stamen js, I don't have a normal tile URL. Is it still possible to use the minimap with this type of tile layer?
The toggleDisplay option never gets set on the MiniMap control when using the latest version of leaflet 0.6.4.
This line:
L.control.minimap(overview, { toggleDisplay: true }).addTo(map);
does not set the option in the control. Even with Firebug running and tracing the variable it never get set to true, stays at false and then does not display the min/max button.
In fact with more testing it appears none of the options when passed as above do anything. Have tried width and height L.control.minimap(OverView, { height:250, true, width:250 }).addTo(map); and nothing changes on the map display - the control appears with default options. Suspect it is version of leaflet thing but I am new to leaflet still so do not understand the calling methods as yet.
** UPDATE **
A little more work has shown me that calling the code using addControl seems to work:
map.addControl(new L.Control.MiniMap(OverView, { toggleDisplay: true }));
However this seems different than the current .addTo functionality but it works.
(Similar to https://maps.google.com/ etc.)
Moving a "ghost" rectangle on drag is also nice for usability.
Right now the minimap operates at a fixed offset from the main map. It should be possible to instead set it to always operate at a fixed zoom level if desireable.
How about adding this package to the NPM registry? You already have a package.json, so it should be simple.
probably just "npm publish"
here is all the steps from scratch:
http://decodize.com/javascript/build-nodejs-npm-installation-package-scratch/
I was trying to fire my own funtion after the map get initialized with a spacific zoom level (2) but after adding the MiniMap it goes down to zoom 5.
My code was:
var mapOptions = {
center: [ 0.0, 0.0],
zoom: 2,
layers: [mainLayer],
zoomControl: false,
zoomsliderControl: true,
panControl: true
};
MapUtils._map = L.map('map', mapOptions);
miniMapLayer.addTo(MapUtils._map);
MapUtils._map.whenReady(function() {
MapUtils._options.onLoad();
});
My MapUtils._options.onLoad() onload funtion was getting the main map zoom and bounds values to request some data to the server but the map had the wrong zoom level so the sata shown was not valid.
After moving the event listeners inside the timeout on the MiniMap.onAdd() function everyting went ok:
/*Curious workaround: For some reason (possibly the DOM not being completely set up so that the map window
* is not actually drawn yet?) if you set the view here the minimap window will not manage
* to calculate tile positions properly and you get a corrupted map. Defer this one millisecond so that this
* method finishes and the DOM catches up, and it works fine. */
setTimeout(L.Util.bind(function ()
{
this._miniMap.setView(this._mainMap.getCenter(), this._decideZoom(true));
this._aimingRect = L.rectangle(this._mainMap.getBounds(), {color: "#ff7800", weight: 1, clickable: false}).addTo(this._miniMap);
if (this.options.toggleDisplay) {
this._addToggleButton();
}
//These bools are used to prevent infinite loops of the two maps notifying each other that they've moved.
this._mainMapMoving = false;
this._miniMapMoving = false;
this._mainMap.on('moveend', this._onMainMapMoved, this);
this._mainMap.on('move', this._onMainMapMoving, this);
this._miniMap.on('moveend', this._onMiniMapMoved, this);
}, this), 1);
return this._container;
Is there an SVG source from which the toggle icon can be re-rendered at @2x
for retina displays?
Mapbox would love to host the plugin on its CDN (prominent plugins are already there), but for that Leaflet-MiniMap needs to be versioned. Ref mapbox/mapbox.js#687
Thanks :)
I just installed leaflet.js 0.7.1 and on firefox, the background is shining through:
with chrome in contrast, minimap control is fine.
live demo at http://pro.mapsmarker.com/?p=40
It would be great if minimap would also change if the basemap in a controlbox is changed.
I thought about defining additional basemaps with postfix _minimap
(osm_mapnik -> osm_mapnik_minimap) so the switch could be done just on this postfix...
currently only "hide" is displayed as hover text for the toogle button regardless of its state. It would be great if "hide minimap" and "show minimap" could be used instead.
It would be nice if there appeared a shadow rectangle over the centre of the minimap when you pan it, showing the area that will become visible on the main map once you finish panning the minimap.
A user of my plugin suggested that it would be great if on the minimap small dots instead of the markers on the main map could be displayed. Adding them might be easy, keeping them in synch when zooming might be a challenge.
I am getting an error while using Leaflet-MiniMap component with browserify and browserify-shim build-tools:
Error: SyntaxError: Unexpected token while parsing json file app/bower_components/leaflet-minimap/package.json
it seems that something is wrong whith package.json. It helps to re-save this file with utf-8 encoding.
Perhaps I'm miss understanding the README, but I thought setting zoomLevelFixed
would prevent the mini map from zooming with the main map, and just pan with it, at the fixed zoom level.
The plugin seems to ignore the value, I have created an example here. Look for the value being set at the bottom of the JS. I had to paste the source of the plugin as jsfiddle doesn't like camelCase filenames in the external resources section.
I am not quite sure what the issue is. I see the mini-map control in the lower right. I have the toggle working. But the MiniMap content is not showing (only the outline).
I suspect it has to do with the fact that my tiles are coming from an PouchDB IDB DB (Chrome 26) and not a url.
I have a list of base layers kept in MAP.baseLayers (they are tile layers):
I add the control as follows
var globe = MAP.baseLayers["BigBlueMarble"];
MAP.map.addControl(new L.Control.MiniMap(globe, { toggleDisplay: true }));
The Functional Tile Layer is a leaflet plugin
I am not seeing warnings about tiles not found (at least not at the zoom of the minimap).
Or, maybe the error is that I am also have a layer control where I can switch Map.baseLayers?
My variant adds this:
function makeLayer(Class, Type, settings) {
var label = {};
DB[Type] = Pouch(Type);
var layer = new L.TileLayer.Functional(function (view) {
var deferred = $.Deferred();
var id = view.zoom + "-" + view.tile.column + "-" + view.tile.row;
DB[Type].getAttachment(id + "/pic", function (err, response) {
if (err) {
console.warn("Could find blob id: ", Type + "." + id, " error: ", err.error, " reason: ", err.reason, " status: ", err.status);
} else {
var blob = response;
var imgURL = URL.createObjectURL(blob);
deferred.resolve(imgURL); // let leaflet know we're done, and give it the URL
URL.revokeObjectURL(imgURL); // not sure if we're revoking it too soon here
}
});
return deferred;
}, settings);
MAP.map.addLayer(layer);
label[Type] = layer;
if (Class == "BASE") {
$.extend(MAP.baseLayers, label);
} else {
$.extend(MAP.overlays, label);
}
}
If the first thing you do in the main map is zoom in or out without doing any panning first, the minimap will update the bounding box of the main map, but not zoom in/out. On the next movement or zoom in the main map it will correct the zoom and thereafter work as intended, so this is a pretty minor inconvenience.
I upgraded my pro dev version to leaflet v0.7 and found a small issue with the styling of the minimap toggle control:
I changed width+height in the following definition to 19px and it worked again:
.leaflet-control-minimap-toggle-display {
background-image: url("images/toggle.png");
border-radius: 2px 0px 2px 0px;
height: 19px;
width: 19px;
position: absolute;
bottom: 0;
right: 0;
}
at least not with:
crs: L.CRS.Simple
or how do I set that?
An internal instance of L.Map is used for the minimap, which is fine if you're going with default options.
However, it does mean that the minimap does not play well with some plugins, nor if you're using nonstandard map options for the main map (e.g., using a custom CRS).
My suggestion would be to add a mapOptions option to the minimap option list, like so:
new L.Control.MiniMap(minimap, {
toggleDisplay: true,
width: 210,
height: 210,
mapOptions: {
panControl: false,
zoomsliderControl: false,
crs: L.CRS.Simple,
}
}).addTo(map);
Anyways, keep up the good work on this lovely Leaflet plugin :-)
The same event listener is added twice:
https://github.com/Norkart/Leaflet-MiniMap/blob/master/src/Control.MiniMap.js#L61
Nice plugin!
Bjørn
I started playing around integrating your plugin. Have you tested if your plugin is compatible with bing basemaps (when using https://github.com/shramov/leaflet-plugins plugin).
Bing maps normally display well in my plugin, although if I add a bing minimap, the map doesnt show up and instead I get the error "Got metadataAccess was denied. You may have entered your credentials incorrectly, or you might not have access to the requested resource or operation."
Do you have any ideas why this is happening?
Right now if you scroll the main map as far out as you can get, the minimap will behave in a funny way if the layer inside it has the same min zoom level as the one in the main map. The reverse happens if you use the minimap to zoom as far in as possible.
Is it possible to tell the mini map to use a different set of resolutions to that of the main map? I’d like to be able to get the mini map to zoom out further than the main map even when you’re zoomed out at the minimum level. That way I could still show a rectangle on the mini map.
Can that be done already, or is it something that isn’t really possible?
Hi there!
Is there a way to re-initialize minimap after first time loading?
I have a simple toggle, that shows and hide miniMap. I tried to do so by adding and removing miniMap to and from the main map. It seems it's not working however after the first hide/show cycle!
I may be missing something, could you help me out?
Thanks for the great work!
Andrea
It appears that the onMainMapMoved is not fired when a a map has a fixed height (all of the examples use the fullscreen.css 100% height value). This prevents the miniMapMoving boolean from getting reset to false. The next subsequent call to map.setView will then miss miniMap.setView in the if block. You can view the normal example.html with 100% height working normally here. An example of the issue when the map has a fixed height can be seen here. I'll try to submit a pull request changing the initial value of mainMapMoving to true which should alleviate the problem. I tested this with examples and saw no regression but someone with a better handle on the code might have a better fix for this.
From Robert Harm:
I just updated my minimap implementation for the next pro release and found a small issue: the new icon is not really centered within the toggle box.
I removed the following code from your .css-file / .leaflet-control-minimap a { and everything was fine again:
background-position: 1px 2px;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.