javascript - OpenLayers 3 Polymer 1.0 module -
i'm trying make polymer module working openlayers 3 , displaying openstreetmaps. know there great module working leaflet need specifics functions map orientation.
anyway, code , it's working except 1 thing can't figure out : when page loads, commands showing (zoom + / zoom -) , not map (and not thing such marker, etc). if resize window (my chrome window mean) map appear , working fine !! thinking maybe in relation dom loading...
module code :
<dom-module id="openlayer-map"> <link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script> <style> :host { display: block; } #map { position: absolute; height: 100%; } </style> <template> <div id="map" class="map"></div> <!-- tests <input is="iron-input" bind-value="{{latitude}}" placeholder="latitude"> <input is="iron-input" bind-value="{{longitude}}" placeholder="longitude"> --> </template> </dom-module> <script> (function() { polymer({ is: 'openlayer-map', properties: { currentcenter: array, currentview: ol.view, olmap: ol.map, geolocation: ol.geolocation, layer: object, longitude: { type: number, value:12.889101100000062, notify: true, observer: '_updatelongitude' }, latitude: { type: number, value: 15.7622695, notify: true, observer: '_updatelatitude' }, geotracking: { value: false, type: boolean, notify: true, }, elemready: boolean, }, ready: function() { console.log('openlayer-map ready'); this.initialconfig(); this.elemready = true; this.setcenter(this.latitude,this.longitude); }, initialconfig: function() { console.log('initial config map...'); this.currentview = new ol.view({ zoom: 14 }); var source = new ol.source.osm(); this.layer = new ol.layer.tile(); this.layer.setsource(source); this.olmap = new ol.map({ layers: [this.layer], target: this.$.map, controls: ol.control.defaults({ attributionoptions: /** @type {olx.control.attributionoptions} */ ({ collapsible: false }) }), view: this.currentview }); // localisation this.geolocation = new ol.geolocation({ projection: this.currentview.getprojection() }); this.geolocation.settracking(this.geotracking); if(this.geolocation) { var accuracyfeature = new ol.feature(); this.geolocation.on('change:accuracygeometry', function() { accuracyfeature.setgeometry(this.geolocation.getaccuracygeometry()); }.bind(this)); var positionfeature = new ol.feature(); positionfeature.setstyle(new ol.style.style({ image: new ol.style.circle({ radius: 6, fill: new ol.style.fill({ color: '#3399cc' }), stroke: new ol.style.stroke({ color: '#fff', width: 2 }) }) })); this.geolocation.on('change:position', function() { var coordinates = this.geolocation.getposition(); positionfeature.setgeometry(coordinates ? new ol.geom.point(coordinates) : null); }.bind(this)); var featuresoverlay = new ol.layer.vector({ map: this.olmap, source: new ol.source.vector({ features: [accuracyfeature, positionfeature] }) }); } }, _updatelatitude: function(newvalue, oldvalue) { if(this.elemready) { console.log('update latitude '+oldvalue+' '+newvalue); this.setcenter(newvalue, this.longitude); } else { console.log('_updatelatitude: waiting element ready'); } }, _updatelongitude: function(newvalue, oldvalue) { if(this.elemready) { console.log('update longitude '+oldvalue+' '+newvalue); this.setcenter(this.latitude, newvalue); } else { console.log('_updatelatitude: waiting element ready'); } }, setcenter: function(latitude, longitude) { var center = [longitude, latitude]; this.currentcenter = ol.proj.fromlonlat(center); console.log('update center of map latitude = '+latitude+' , longitude = '+longitude); this.currentview.centeron(this.currentcenter,[400,400], [0,0]); }, }); })(); </script> and call in polymer :
<openlayer-map latitude="48.853" longitude="2.35" geotracking></openlayer-map> any clue ?
found ! needed map initialization in asynchronous call
attached: function() { this.async(function() { this.initialconfig(); // create ol.map here }); },
Comments
Post a Comment