I'm trying to get a basic example of react-leaflet 2.2.1 to work with the latest react release, 16.8.4. However, the leaflet map does not display correctly.
I used create-react-app to create a new project, then modified the App.jsx to include a component that is identical to the codepen example given for react-leaflet. The only change is to the containing div where I specified the height & width.
The map tiles do not render within the div and instead end up in somewhat random positions.
The entire app code in https://github.com/sknutsonsf/agdex/tree/master/src
This looks like some kind of compatibility issue with the new react version.
I had the same issue, adding
import 'leaflet/dist/leaflet.css';
solved my problem
Related
I have an SVG asset of a map, in which I have to change the color of some cities depending on the results of a network call. On the web, one normally would add a class to each path, give it some CSS, and toggle that class using JavaScript.
How can I achieve the same effect in flutter?
This can be done with the new version of jovial_svg. It supports embedded stylesheets, so you can use CSS exactly as suggested. Of course, you'd need to re-parse the SVG whenever there's a change, but that's not a big deal here.
Alternately, if it's just one set of cities, you could use SVG's currentColor, and set that value in the appropriate ScalableImage factory. But for your use case, CSS seems like the better way to go.
NOTE: At this exact moment, CSS support is in pre-release, but it should be formally released as 1.1.4 within a couple of days. In the meantime, see https://pub.dev/packages/jovial_svg/versions/1.1.4-rc.3
hello I am a leaflet newbie, I am building my app with map component. the marker on the map should be updated every time the user perform specific action (filters) . the component was working fine . then I decided to add the responsive popup plugin from the original Leaflet. so I tweaked a lot the normal component of react leaflet . now every time I perform I new filters the new markers are added successfully to the map however the old marker are not deleted.
codesandbox demo
any help on how to fix this ?
If you are not bound to that component (leaflet-responsive-popup) you can solve it like this (preferred solution):
CodeSandbox without ResponsivePopup
<Marker key={i} position={bus}>
<Popup>
<span>Note<br />{i}</span>
</Popup>
</Marker>
If you have to use that component than you have to store markers in an array and clear all the markers before you add new ones like this:
CodeSandbox with ResponsivePopup
Problem is that you were adding markers, while never removing the old ones. You have to pass all the coordinates so that first you could remove the old ones and than add the new ones.
I've created a stencil.js application (app starter) where I would like to use ionic components.
I included Ionic using the cdn following this tutorial (https://ionicframework.com/docs/installation/cdn). I have a problem with the style of some of the components like buttons, toggle etc. The problem is that the primary/secondary/x style is not applied also if I use
color="primary"
I've searched a lot to solve this problem and I saw that the property .ion-color-primary isn't apply to the button like it should, so none of the colors are applied to the button that remains white.
If I use Ionic from cdn in a html page (with no stencil.js) the problem don't happen so I think that the problem it's stencil.
I've the latest stencil version, 4.11.7.
I'm integrating MB on my Ionic 3 project.
There's a map on my 'home' page. When user touches a button another map loads which uses the Directions API and after another click by user another map is supposed to load but won't.
The map div is present on this page but the styles and js script don't seem to get applied to it.
Is there a limitation which declares you cannot load MapBox 3 times in a project or is there something from my end?
Thank you in advance.
So, sigh, the problem was I was using the same map id on all my HTML pages containing a map div, forgetting Ionic applications are called one-page-apps.
Renaming map container divs fixed it.
My custom map which has been produced by using MapTiler 0-5 levels displays well
on leaflet 0.6.4 but is not shown on version 0.7.3. Sorry, but I'm really new in using leaflet and maps. I've googled and checked the documentation on leaflet.com but haven't got any clue of a solution. Please help.
This is a demo using 0.6.4 and html already prepared for 0.7.3.
Sorry folks, I've just found my solution after googling again with other search
criteria. So I've found thread #2776 from Jakoboud pointing me to a possible solution. This does the trick -> continuousWorld: true and my map shows up.
Here's another question: how can I keep this map centered in browser window if the shown map part is smaller in width/height than browser window? map.setMaxBounds() doesn't work, it's bouncing the small map endlessly.