leaflet-extras / leaflet-map Goto Github PK
View Code? Open in Web Editor NEWLeaflet map as web component
Home Page: https://leaflet-extras.github.io/leaflet-map
Leaflet map as web component
Home Page: https://leaflet-extras.github.io/leaflet-map
Is this element maintained?
The last commit is from March 2016.
Thanks in advance!
I am using the leaflet-map web component within an Angular 2 app, and the two appear to be a very good match.
However, there appears to be a problem with the way that Angular 2 updates the view and the way that leaflet-map updates the underlying leaflet map. For example, lets say I have an array of 3 locations and plot these on a map with the leaflet-marker
element. If I then remove the second location from my array angular will update the DOM to show only two leaflet-marker
elements, however, the last two markers are removed from the map.
It appears that Angular 2 removes the last maker (but not the first), and then reattaches it. This is the same leaflet-marker
element, so no new marker is created.
I have managed to get the markers working correctly with Angular 2 by adding the following Polymer callback to leaflet-marker
.
attached: function(){
if(this.container && this.feature){
this.feature.addTo(this.container);
}
}
I'm happy to create a pull request if you think this is an acceptable approach.
I am using the tag as follows:
<leaflet-map id="leaflet" content tab="true" longitude="-121.00" latitude="40.00" zoom="5"></leaflet-map>
*Note: no data bindings to lat or lng. And the map is set to 100% width and height of screen.
Sometimes when I change device orientation the map freezes. Seems there is an infinite loop: leaflet-map.view() -> map.on('moveend') -> changes lat / lng -> observe fires leaflet-map.view() -> ...
Hi, I'm using web-components-shards to separate vulcanized bundles. When I built leaflet-map
with it, the following warnings were emitted.
Behavior leafletMap.LeafletPopupContent not found when mixing properties into leaflet-circle!
Behavior leafletMap.LeafletPopupContent not found when mixing properties into leaflet-polyline!
Behavior leafletMap.LeafletPopupContent not found when mixing properties into leaflet-polygon!
Behavior leafletMap.LeafletTileLayer not found when mixing properties into leaflet-tilelayer!
Behavior leafletMap.LeafletTileLayer not found when mixing properties into leaflet-tilelayer-wms!
Behavior leafletMap.LeafletILayer not found when mixing properties into leaflet-geojson!
Behavior leafletMap.LeafletPopupContent not found when mixing properties into leaflet-marker!
This is because hydrolysis often fails to detect definitions of behaviors without @polymerBehavior
annotations. If it fails, it emits them.
You can reproduce this in the following way.
$ npm install hydrolysis
$ mkdir -p ../leaflet/dist
$ touch ../leaflet/dist/leaflet.css
$ touch ../leaflet/dist/leaflet.js
// Save as `test.js`
var h = require('hydrolysis');
var imports = [
'leaflet-control.html',
'leaflet-core.html',
'leaflet-draw.html',
'leaflet-geojson.html',
'leaflet-geolocation.html',
'leaflet-import.html',
'leaflet-layer-group.html',
'leaflet-layer.html',
'leaflet-map.html',
'leaflet-marker.html',
'leaflet-popup.html'
];
imports.forEach(function(html) {
h.Analyzer.analyze(html);
});
$ node test.js
If you'd like it, I'll make a PR.
Thanks.
In the current version of the project, the fitToMarkers
attribute doesn't work.
Here you have an example:
<leaflet-map fit-to-markers>
<leaflet-marker latitude="51.5" longitude="-0.10" title="Transparent" opacity="0.6">
</leaflet-marker>
<leaflet-marker latitude="51.5" longitude="-0.09" title="Popup Demo">
<b>Bold</b>
<p>Text</p>
</leaflet-marker>
</leaflet-map>
The fitToMarkers
attribute should make the component to scan all the layers, get the lat-lng for all the features (here the two markers) and use them as bounding box for the map. But it doesn't anything.
The problem, AFAIK, is in the fitToMarkersChanged
event:
fitToMarkersChanged: function () {
if ( this.map && this.fitToMarkers) {
var bounds = [];
for( var i = 0, f; f = this.features[i]; i++ ) {
if ( f.latitude && f.longitude ) {
bounds.push( [ f.latitude, f.longitude ] );
}
}
if ( bounds.length > 0 ) {
this.map.fitBounds( bounds );
this.map.invalidateSize();
}
}
}
where this.features
doesn't exist (anymore?).
In other, in current Polymer version, the event isn't fired when an initial value to fitToMarkers
is given.
Hi there,
There is some problems with events on tables and mobiles (touchable devices). Zoom in/out doesn't work and neither markers/polygons. I have same related problem in other projects, whether I resolve the problem I would contact with you.
Good luck
Hey guys
I have this issue:
The leaflet point is created but not filled with longitude and latitude. the index is filled.
the locationarray is a [Object, Object, Object, Object, Object, Object] with
0: Object
lat2: 52.3812073
long2: 13.3977036
I get this error leaflet.js:6 Uncaught TypeError: Cannot read property 'lat' of null.
Is there a problem with dynamically generated leaflet points ?
On the demo page at http://leaflet-extras.github.io/leaflet-map/demo.html the example given is:
<leaflet-icon id="myicon"
iconurl="https://stendhalgame.org/images/mapmarker/me.png"> </leaflet-icon>
Shoud this be changed to?:
<leaflet-icon id="myicon"
icon-url="https://stendhalgame.org/images/mapmarker/me.png"> </leaflet-icon>
Hi
I recently updated polymer and polymer elements and in IE leaflet messes up tiles. The code to reproduce is here
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/iron-pages/iron-pages.html'>
<link rel='import' href='bower_components/leaflet-map/leaflet-map.html'>
</head>
<body unresolved>
<iron-pages id='pageControl' selected='0'>
<section>
<leaflet-map style='width:1000px; height:1000px'></leaflet-map>
</section>
</iron-pages>
</body>
What could be the problem?
Hi @brunob,
how do we organize the move to leaflet-extras?
As discussed in various places, the idea was to consolidate the implementation from @prtksxna and mine, which we did in autumn. And then move it to an official leaflet-repository. Leaflet, however, prefers to put it into leaflet-extras, which is fine with me.
With polymer 1.0 being released today and breaking compatibility, now is a good time to move the consolidated component to leaflet-extras. The Polymer 0.5 based components can stay at their old locations for a couple of month with a big hint at the top.
Current status is this: The port to Polymer 0.9 (compatible with 1.0) is in the 0.9 branch of https://github.com/nhnb/leaflet-map/ I have a local gh_page branch for the 1.0 website.
Please create a leaflet-extras/leaflet-map repository and grant commit access to @prtksxna and me.
Thank you
Hendrik
I face an issue where using leaflet-map in naked index.html works; while putting it in a component would not render. Any clue?
Would be nice to have!
See these links:
http://leafletjs.com/reference.html#map-zoomanimation
http://leafletjs.com/reference.html#map-markerzoomanimation
The event demonstration registers a moveend event and displays the position above the map. Although this is a valid example, it seems to be overlooked by causal visitors.
The demo should be released with a demonstration that adds markers on click events.
Is it possible to reposition the zoom control position using entirely markup?
There should be support for GeoJSON layers. They are probably very similar to TileLayer.WMS
Popups are already supported as contents of and .
It should be possible to define popups without them being bound to another map object.
Hi there,
The zoom-in/zoom-out button has this style :
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
Why do use a 1000 z-index?
I use polymer's paper-dialog which have a z-index of 103... So when opening the dialog, I see the zoom-in/zoom-out button.
Why did you use a this value?
I am trying to integrate clustering using https://github.com/Leaflet/Leaflet.markercluster.
When i try to add the markers layer using map.addLayer() page freezes. Am i doing something wrong or is there any issues with it?
I'm having trouble overriding the default style for features brought into my map using leaflet-geojson. It seems from the examples to be possible to set styles with components like leaflet-polygon, leaflet-circle etc. For instance, you can assign a polygon a color like this: <leaflet-polygon color="#f00">...</leaflet-polygon>
.
However if I do something similar with leaflet-geojson the features are drawn with Leaflet's default style for the geometry type. Following the model from the leaflet-polygon example, I tried this to make my features yellow:
<leaflet-geojson data="[[data]]" color:"#f7ff00"></leaflet-geojson>
But the default line style is returned:
(source | live example)
I guess my question is, Is there a way to style leaflet-geojson features using an HTML attribute?
Changing color property of leaflet-geojson in code doesn't affect.
I cannot seem to get the popup to update when the data changes. Any suggestions?
Example HTML:
<dom-module id="x-app">
<template>
<leaflet-map>
<leaflet-marker latitude="51.5" longitude="-0.09" title="Popup Demo">
<p>Content <span>[[num]]</span></p>
<!-- Num should be 2 after a while, but perpetually remains 1 -->
</leaflet-marker>
</leaflet-map>
</template>
<script>
Polymer({
is: 'x-app',
properties: {
num: {
type: Number,
value: 1
}
},
ready: function () {
this.async(function () { this.num++ }, 2000);
}
});
</script>
</dom-module>
I essentially am trying to utilize leaflet-map for the use case discussed here: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
Using leaflet-map to display an L.imageOverlay with a crs of L.CRS.Simple
The post shows some additional logic for calculating bounds which I do not believe the bounds properties are exposed on the element
In https://github.com/nhnb/leaflet-map/blob/master/leaflet-marker.html#L570
the zindexOffset key should be zIndexOffset (capital "I")
If you'd like a pull request I can put that together, but I thought one character might be easier just to edit on your own.
Thanks! Great element!
Trying to just load in a test map I get the following:
Uncaught TypeError: Cannot read property 'disconnect' of undefined
It points to line 726 in leaflet-core.html
detached: function() {
this._mutationObserver.disconnect();
},
I am running Chrome 50. Everything is loading ok. Is this a known thing? Is it something I am doing wrong on my end? I am trying to drop this into a page that uses Material Design Lite, don't know if that could be an issue.
appreciate any guidance..
Hi there,
I try to use the leaflet-map with polymer.
I add the leaflet-map tag inside my template, but when loading (and waiting) there is only one tile which is displayed (in the top left) with the original configuration (no leaflet-tilelayer, only set the latitude, longitude and zoom)
Does anyone have any idea?
Thanks a lot
I have a map using both stock and custom icons (SVGs), that work well on our local machines (on both Firefox and Chrome) but are not visible when served from Windows Server 2008r2. All other SVGs work on the server on this site and others. I can see the SVGs and stock PNGs in my browser if I navigate to them directly, and I can view them on the server directly in IE. I have explicitly set the path to the image folder in our map element. We are still seeing only broken images icons when viewing the app from our servers. Chrome's developer console returns 'text/html' fir the PNGs and SVGs we are using. I tried replacing our custom marker icons with stock markers, and these are also not visible from the server.
My map frozen after I pan the map.
I am using Chromium WebView on Android 5.1.1
is there any solution?
Hi,
Ive been looking at a better way to provide the browser side of my freeboard project (https://github.com/rob42/freeboard-server - marine navigation with browser and commdity hardware) for a while, and the chartplotter is based on Leaflet. WebComponents looks ideal as a future, combined with signalK (http://signalk.github.io/) as the websockets protocol. How do you feel about helping tailor your component for freeboard?
Rob
Thanks a lot for offering this up - I've been using it in my workplace and it's working pretty well.
I'm trying to import leaflet-map into my company's "third party" code directory but I'm having a problem with the language in the license, specifically this part:
leaflet-map is based on polymer and leaflet. Small parts of leaflet, especially the api documentation, have been copied into leaflet-map files.
It's not clear whether "based on" means. Is it derived (pieces of Polymer core code interspersed throughout), or is it just a certain subdirectory, or does it simply implement a Polymer element? I suspect the very latter, but I just want it to be clear.
Thanks!
I use this element as part of another web component and I wrote some tests but they all fail during the initialization phase of the element.
Vulcanize is the Polymer build tool that can inline HTML and CSS imports. When an app is vulcanized with the --inline-css
flag enabled, the map tiles will not show up correctly. This is caused due to the leaflet css file not loading correctly.
I am using Polymer 1.1.0 where external CSS files have been deprecated but should still work.
Can be reproduced by installing vulcanize and vulcanizing the demo.
npm install vulcanize
vulcanize --inline-css demo.html > demo.vulcan.html
Work around is to add this line to your root HTML file before vulcanizing, making the CSS available to all.
<link rel="import" type="css" href="../leaflet/dist/leaflet.css" />
I just would like to know if you are interested to continue developing this project or not.
I get this error when loading leaflet-map.html into my rails project with polymer.
Cannot define property "title" for element "leaflet-marker" because it has the same name as an HTMLElement property, and not all browsers support overriding that. Consider giving it a different name.
Seems like the sort of collision web components is designed to avoid but perhaps browser properties penetrate the shadow dom defenses?
// polymer.js excerpt
// Publishing/computing a property where the name might conflict with a
// browser property is not currently supported to help users of Polymer
// avoid browser bugs:
//
// https://code.google.com/p/chromium/issues/detail?id=43394
// https://bugs.webkit.org/show_bug.cgi?id=49739
//
// We can lift this restriction when those bugs are fixed.
filterInvalidAccessorNames: function(propertyNames) {
for (var name in propertyNames) {
// Check if the name is in our blacklist.
if (this.propertyNameBlacklist[name]) {
console.warn('Cannot define property "' + name + '" for element "' +
this.name + '" because it has the same name as an HTMLElement ' +
'property, and not all browsers support overriding that. ' +
'Consider giving it a different name.');
// Remove the invalid accessor from the list.
delete propertyNames[name];
}
}
}
I have boiled my problem down to whats shown below
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/paper-styles/paper-styles.html'>
<link rel='import' href='bower_components/neon-animation/neon-animated-pages.html'>
<link rel='import' href='bower_components/neon-animation/neon-animatable.html'>
<link rel='import' href='bower_components/leaflet-map/leaflet-map.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<template>
<neon-animated-pages id="pages" class="flex" selected="0">
<neon-animatable>
<leaflet-map style='height:1000px;width:1000px'></leaflet-map>
</neon-animatable>
</neon-animated-pages>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page'
});});
</script>
<base-page></base-page>
</body>
When leaflet is part of a neon-animated-pages, the tiles do not show correctly in IE. Please someone help me ... @nhnb any idea about the issue?. Thanks
This may be related to the othe rissue I have posted earlier about the map not displaying correctly when part of iron-pages
Thanks and Cheers
leaflet-map
is surprisingly still depending on the web components polyfill. It should provide support for native Web Components that shipped on Chrome and Opera.
I cant get zoom-control='false' to work
<polymer-element name="my-thing" >
<template>
...
<leaflet-map latitude="51.505" longitude="-0.09" zoom="13">
<leaflet-icon id="myicon"
iconurl="https://stendhalgame.org/images/mapmarker/me.png"> </leaflet-icon>
<leaflet-marker latitude="51.5" longitude="-0.10" title="Element" icon="myicon">
I think the problem is at line 599 of leaflet-marker.html
var iconElement = document.getElementById(this.icon);
since the element will be in the shadow DOM, document.getElementById will fail.(return null)
The following attributes should be changed
fillColor
-> fill-color
fillOpacity
-> fill-opacity
There should be automatic tests to ensure that future change will not break existing features.
http://getshao.com/2013/08/25/how-to-test-a-bower-package-with-travis-ci/
https://stackoverflow.com/questions/14284915/fuzzy-screenshot-comparison-with-selenium
Hi, the demos with markers are not working unless I have the leaflet folder in the root of my site.
After a bower install (where the leaflet folder is installed in the bower_component folder at the same level as leaflet-map)
I'm getting a 404 not found
http://mysite.com/leaflet/dist/images/marker-icon.png
and another 404 for marker-shadow.png
The layer control should be definable as component as well.
I should default to using TileLayers as base layers. LayerGroups, FeatureGroup, GeoJSON and TileLayer.WMS should be optional layers. Vector layers, that are not part of of a Layer- or FeatureGroup should be ignored by the layer control.
i wrapped an angularJS SPA demo with the leaflet-map web component inside.
The element works perfectly in the web browser, but not in a hybrid app in mobile device (android/amazon fireOS).
This looks to be a common issue with cordova apps when images are loaded from remote locations instead of the device's file system.
I remote debugged the device with chrome's inspector. All the tile images get a 404.
steps to repro:
install ionic framework (or just cordova)
$ionic create leafletdemo blank
optionally add crosswalk support (this replace webview)
edit the index.html and add the leaflet-map
connect the device (debugging enabled)
$ionic run android
goto chrome://inspect/#devices and see the network tab
Looks a custom implementation of a transfer file/cache pattern inside the component is required for solving the issue, instead of using the img tag with a remote src.
refs:
http://tech-blog.silviaterra.com/2013/02/offline-mapping-in-html5-mobile-apps.html
https://github.com/apache/cordova-plugin-file-transfer
Hi.
Polylint detected <dom-module> is undefined
at
leaflet-map/leaflet-geojson.html
Line 23 in 5823477
I think name
should be replaced with id
, or the dom-module definition should be removed unless it displays anything.
Try and place the leaflet map in another element with a leaflet-tilelayer pointing to
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
It will fail with
GET https://%7Bs%7D.tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png net::ERR_NAME_NOT_RESOLVED
So it seems it is replacing the {}'s
I am working with GeoJSON fine via the component
<leaflet-map latitude="16.5" longitude="-80" zoom="5">
<leaflet-tilelayer url="https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}" max-zoom="13">
Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri
</leaflet-tilelayer>
<template is="dom-bind">
<iron-ajax url="http://localhost:6789/api/v1/spatial/expedition/165" auto last-response="{{data}}"></iron-ajax>
<leaflet-geojson color="#FF0000" data="[[data]]"></leaflet-geojson>
</template>
</leaflet-map>
Is there some property I can put into the GeoJSON that will form a popup when the marker is selected in the map?
The GeoJSON is
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
-79.8674,
16.5537
],
[
-79.8674,
16.5536
],
[
-74.9105,
15.7571
],
[
-74.9104,
15.757
],
[
-65.1696,
10.7061
],
[
-65.1696,
10.7061
],
[
-65.1694,
10.7061
],
[
-65.1693,
10.7061
],
[
-65.1693,
10.7061
],
[
-82.9361,
19.4896
],
[
-82.936,
19.4898
],
[
-78.7393,
12.744
],
[
-78.7403,
12.7433
]
]
},
"properties": {
"Site": "ODP expedition 165",
"URL": "http://opencoredata.org/id/expedition/165",
"popupContent": "http://opencoredata.org/id/expedition/165"
}
}
]
}
Wishing to have latest leaflet for this component.
Line 281 in leaflet-marker.html should be:
this.icon_ = L.divIcon(icon);
divicon() -> divIcon()
Somehow moving in the maps is not possible by touchscreen, also not in development-tools in chrome and firefox. Might has something to do with "tap" in polymer?
Nothing happens when leaflet-geolocation
granted geolocation permission on Firefox Stable on Windows. It should redirect and show up the map of the coordinates received.
In the following example I expect the circle to update it's position once the marker is dragged.
Even when manually printing out latitude
and longitude
via on-drag
the marker always shows only the initial values I set.
Do I miss something or is it a bug?
<leaflet-map fitToMarkers="true">
<leaflet-marker on-drag="updateCircle" draggable="true" longitude="{{longitude}}" latitude="{{latitude}}"> </leaflet-marker>
<leaflet-circle longitude="{{longitude}}" latitude="{{latitude}}"
radius="{{mapRadius}}" color="#0a0" fillColor="#077">
</leaflet-circle>
</leaflet-map>
// […]
updateCircle: function (e) {
// this will always show only the initial location set, not the new one after dragging
console.log(e.originalTarget.latitude, e.originalTarget.longitude);
}
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.