include render troubleshooting in readme example

[jbixon13]

Added example of troubleshooting map render. Additionally, I considered adding an example of options on the base map as I didn't even notice there was already an example on GeolocateControl:

<GeolocateControl options={{ some: 'control-option' }} on:eventname={eventHandler} />

It would look something like:

<Map
  accessToken="<your api key>" // add your api key here
  bind:this={mapComponent} // Get reference to your map component to use methods
  on:recentre={e => console.log(e.detail.center.lat, e.detail.center.lng) } // recentre events
  options={{ scrollZoom: false }} // add arbitrary options to the map
>

Let me know if you think it's redundant; I'll note I think I didn't notice the existing example on GeolocateControl because I knew I just wanted to get a basic example working and didn't want geolocation.

[antony]

I'm a bit confused by this PR actually - where is the element with class "mapboxgl-map"?

I think the example of options is a good idea to have on both examples - so lets do that :)

[jbixon13]

that css class refers to the map container as is created by mapbox - see the first line:

I used that css class selector to make my map fullscreen which is a little more complicated than the example I included but has the same concepts:

    :global(.article .mapboxgl-map) {
        height: 100vh;
        width: 100vw;
        position: relative;
        left: calc(-50vw + 50%)
    }

[antony]

Ah okay - then I think your example is wrong. You need the :global selector :)

[jbixon13]

good point, I assumed that was only needed for my use-case because all of my styles on that page are globally scoped. You're correct though because I tried to use the same css class without the global and it didn't work. I'll update accordingly and add the options example as well