Missing Mapbox GL JS CSS

[jparish3]

Thanks for adding the geocoder element! One issue I am having after using with existing maps is the display of the error message above at the top of the map. I added css-src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css", but that did not help...I am not hosting external so that is probably not a fix

[jparish3]

Also, is it possible to extract the geocode data for data-binding?

[eterna2]

@jparish3 Can I know what browser are you using? You should not be see that if the css is loaded correctly.

[eterna2]

btw v2.0.10 now has last-results for the latest query results for mapbox-gl-geocoder. There is also an result event.

[jparish3]

Chrome Version 62.0.3202.94 (Official Build) (64-bit)

When I add the geocoder to an app that uses multiple mapbox-gl elements ion separate pages; only one will display and the others exhibit the error at the top of the map. I really like the element, but hard to use if only on one map. Also, Is there a way to get map bounds on load and for any map movement?

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Wed, Nov 22, 2017 at 10:55 AM, Eterna2 notifications@github.com wrote:

btw v2.0.10 now has last-results for the latest query results for mapbox-gl-geocoder. There is also an result event.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/19#issuecomment-346392527, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqgJIU5PK4rjnDkWV3Vn9xGUtiCVpks5s5EPzgaJpZM4QgnL_ .

[eterna2]

@jparish3 Hi, try v2.0.11. It should be fixed now.

[eterna2]

there a way to get map bounds on load and for any map movement?

@jparish3 you can use the events-to-watch attribute to watch the any mapbox event. The corresponding events will be prefix with mapbox-gl.

Example

<mapbox-gl events-to-watch="rotate zoomend"
 on-mapbox-gl-move="handleMove"
 on-mapbox-gl-rotate="handleRotate"
 on-mapbox-gl-zoomend="handleZoomend"></mapbox-gl>

move event is watched by default. So u can listen to it without updating the events-to-watch attribute.

You can then get the bounds inside the move handler with the getBounds function.

Example html

<mapbox-gl map="{{map}}" on-mapbox-gl-move="handleMove"></mapbox-gl>

js

handleMove(e, detail) {
  // detail.target === app.map
  // u can either reference detail.target or the map instance
  // use getBounds() to get the bounds and then update whatever external variables u want to.
  var latlng = app.map.getBounds();
}

[jparish3]

thanks; I had tried using a bounds property with that call but could only get the bounds for the initial load. Im not sure how to tie it into the on-mapbox-gl-move listener from your example...any suggestions appreciated. bounds: { type: Object, computed: 'computeBounds(map)', notify: true }, ...... computeBounds(map) { return this.map.getBounds(); }

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Sat, Nov 25, 2017 at 9:43 PM, Eterna2 notifications@github.com wrote:

there a way to get map bounds on load and for any map movement?

@jparish3 https://github.com/jparish3 you can use the events-to-watch attribute to watch the any mapbox event. The corresponding events will be prefix with mapbox-gl.

Example

<mapbox-gl events-to-watch="rotate zoomend" on-mapbox-gl-move="handleMove" on-mapbox-gl-rotate="handleRotate" on-mapbox-gl-zoomend="handleZoomend">

move event is watched by default. So u can listen to it without updating the events-to-watch attribute.

You can then get the bounds inside the move handler with the getBounds https://www.mapbox.com/mapbox-gl-js/api#map%23getbounds function.

Example html

js

handleMove(e, detail) { // detail.target === app.map // u can either reference detail.target or the map instance // use getBounds() to get the bounds and then update whatever external variables u want to. var latlng = app.map.getBounds(); }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/19#issuecomment-346980017, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqgw3MHEf3YH6W2F7xsduR85WoMD0ks5s6NBBgaJpZM4QgnL_ .

[eterna2]

@jparish3 You are doing it the wrong way.

For example computed: 'computeBounds(map)' means to execute function computeBounds when map has any mutations (aka changes).

This function will only execute once, and that is when the map is created (i.e. null -> map). Your bounds will never get updated as map (i.e. reference to the object) does not change once it is initialized.

What I meant is to just manually update the bounds whenever the map moves, via the annotated event listener on-mapbox-gl-move.

<template>
<mapbox-gl map="{{map}}" on-mapbox-gl-move="_handleMove"></mapbox-gl>
</template>
<script>
class MapboxElement extends Polymer.Element {
  static get properties() {
    return {map: Object, bounds: Object};
  }
  _handleMove() {
    // assign the current bounds to this property
    this.bounds = this.map.getBounds();
  }
}
</script>

alternatively, since you know that bounds will only change if the center and/or zoom changes. U can change your compute to

<template>
<mapbox-gl 
  map="{{map}}" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}" 
  zoom="{{zoom}}"></mapbox-gl>
</template>

...

{
  bounds: {
    type: Object,
    computed: '_computeBounds(map, latitude, longitude, zoom)'
  }
}

...

_computeBounds(map) {
  // execute only when map exist
  return map && map.getBounds();
}

[jparish3]

Thanks that works great. the bounds object is returned in the format below with updates. I am now trying to figure out how to data-bind the coordinates for a query, but not sure how to extract the coordinates from the string. I tried to call getNorthWest() and getSouthEast() separately but did not get anything. Any suggestions would be appreciated. LngLatBounds(LngLat(-80.89250235995301, 35.207802166381924), LngLat(-80.79799255518427, 35.246640667895335))

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Wed, Dec 6, 2017 at 10:53 AM, Eterna2 notifications@github.com wrote:

You are doing it the wrong way.

For example computed: 'computeBounds(map)' means to execute function computeBounds when map has any mutations (aka changes).

This function will only execute once, and that is when the map is created (i.e. null -> map). Your bounds will never get updated as map (i.e. reference to the object) does not change once it is initialized.

What I meant is to just manually update the bounds whenever the map moves, via the annotated event listener on-mapbox-gl-move.

alternatively, since you know that bounds will only change if the center and/or zoom changes. U can change your compute to

...

{ bounds: { type: Object, computed: '_computeBounds(map, latitude, longitude, zoom)' } }

...

_computeBounds(map) { // execute only when map exist return map && map.getBounds(); }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/19#issuecomment-349681814, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqqlE--_UDFRW8YwYYxXpxysk2UfDks5s9rhvgaJpZM4QgnL_ .

[jparish3]

I added the following and it works for binding. Thanks for your help; this is an important web component for our app. thanks for the support

_handleMove() { // assign the current bounds to this property this.bounds = this.map.getBounds().toArray(); }

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Wed, Dec 6, 2017 at 6:08 PM, Joseph Parish jparish@spatialytx.com wrote:

Thanks that works great. the bounds object is returned in the format below with updates. I am now trying to figure out how to data-bind the coordinates for a query, but not sure how to extract the coordinates from the string. I tried to call getNorthWest() and getSouthEast() separately but did not get anything. Any suggestions would be appreciated. LngLatBounds(LngLat(-80.89250235995301, 35.207802166381924), LngLat(-80.79799255518427, 35.246640667895335))

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798 <(704)%20458-4798>

On Wed, Dec 6, 2017 at 10:53 AM, Eterna2 notifications@github.com wrote:

You are doing it the wrong way.

For example computed: 'computeBounds(map)' means to execute function computeBounds when map has any mutations (aka changes).

This function will only execute once, and that is when the map is created (i.e. null -> map). Your bounds will never get updated as map (i.e. reference to the object) does not change once it is initialized.

What I meant is to just manually update the bounds whenever the map moves, via the annotated event listener on-mapbox-gl-move.

alternatively, since you know that bounds will only change if the center and/or zoom changes. U can change your compute to

...

{ bounds: { type: Object, computed: '_computeBounds(map, latitude, longitude, zoom)' } }

...

_computeBounds(map) { // execute only when map exist return map && map.getBounds(); }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/19#issuecomment-349681814, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqqlE--_UDFRW8YwYYxXpxysk2UfDks5s9rhvgaJpZM4QgnL_ .

[jparish3]

can you recommend a way to add the draw control? It does not load with the control element....thanks mapbox-gl-control

https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Wed, Dec 13, 2017 at 7:29 PM, Eterna2 notifications@github.com wrote:

Closed #19 https://github.com/PolymerVis/mapbox-gl/issues/19.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/19#event-1386775291, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqseFLJFtQ8583T2Ujo2iZ-aaLO0hks5tAGvWgaJpZM4QgnL_ .