3 ms·

There’s not much point to use react for something like this. If you know the map canvas size and tile size of your tiles, you simply need to initialize that man

There’s not much point to use react for something like this. If you know the map canvas size and tile size of your tiles, you simply need to initialize that many images in your container. That only ever changes when the map canvas size changes or the tile size changes. Pans and zooms of the map only change the src of the images at that point.

jonknee 8y ago
React is already used for tons of apps, some of those apps need to display maps and it makes perfect sense to use something in your existing framework.
- mariusandra 8y ago
  Exactly! This project is for apps that already use React and need to add maps. Alternatively, you can try preact [1] or inferno [2] and for a few KB more you have something that is still smaller than Google Maps or Leaflet. Of course if you need more advanced features and geometric calculations the size can go up considerably. Leaflet and Google Maps provide that out of the box. Pigeon-maps doesn't. [1] https://preactjs.com/ https://preactjs.com/ [2] https://infernojs.org/ https://infernojs.org/
  - iamleppert 8y ago
    Leaflet out of the box implements vector tiles, different map projections, has a full layer API, full support for mobile, etc. so it's not a direct 1:1 comparison with your project which is implementing a basic mercator raster tile layer. You can also strip Leaflet down to just the raster tile layer stuff and as it doesn't need react or preact or inferno it will be lighter weight than your solution, and still uses the fundamental underlying display mechanism of image tags.
    - mariusandra 8y ago
      If you need support for all that leaflet provides, go for leaflet. If the feature set of pigeon-maps is enough for your needs and you already use react, feel free to go for it instead. I have never claimed it to match the features of Leaflet while being lighter. It's lighter exactly because it doesn't. Offloading a lot of DOM work to React makes it even lighter. Edit: to correct one point, pigeon-maps does support mobile.
      - iamleppert 8y ago
        >> Offloading a lot of DOM work to React makes it even lighter. What exactly does this mean? The only thing that ever changes, as I mentioned, is the src of the image tags in these kinds of tiled maps. How do you get better performance for updating the src attributes in a grid of images of constant size (256x256 tiles or whatever) other than img.src = ''? That's literally the only DOM manipulation being done, there is no "magic". Also you can reduce a lot of your mouse event handling stuff down to a single "reactive" (haha) callback by doing something like this: https://github.com/mikolalysenko/mouse-event https://github.com/mikolalysenko/mouse-event. Instead of binding a bunch of different handlers, the browser's mouse events API is still bizarre after all these years. Should just be a single event that gets sent the state of control input.
        jonknee 8y ago
        > What exactly does this mean? The only thing that ever changes, as I mentioned, is the src of the image tags in these kinds of tiled maps. What about markers?
    - deleted 8y ago
      [deleted]
    - mikeryan 8y ago
      I think you are looking at this a bit backwards it seems to be a tool used in existing React apps to display maps. Not a tool to display maps that uses React.
mikewhy 8y ago
It's at least 2x that number, if you want to have a nice fade transition. More if you want to buffer the extents. And that's not to mention the things being displayed on the map, like popups, markers, or polygons. Which React's model helps a lot with.
- iamleppert 8y ago
  You can do that with a CSS transition via a class you apply to the element when you change its src and/or have another layer of tiles that you alternate. I was just pointing out the fact that the only thing ever changes here is the src of the image tags of the tiles, the elements always remain constant. So using React is way overkill for what is essentially a static grid of image tags.
  - mariusandra 8y ago
    This library is made for sites that already use React.

jonknee 8y ago

React is already used for tons of apps, some of those apps need to display maps and it makes perfect sense to use something in your existing framework.

mariusandra 8y ago
Exactly! This project is for apps that already use React and need to add maps. Alternatively, you can try preact [1] or inferno [2] and for a few KB more you have something that is still smaller than Google Maps or Leaflet. Of course if you need more advanced features and geometric calculations the size can go up considerably. Leaflet and Google Maps provide that out of the box. Pigeon-maps doesn't. [1] https://preactjs.com/ https://preactjs.com/ [2] https://infernojs.org/ https://infernojs.org/
- iamleppert 8y ago
  Leaflet out of the box implements vector tiles, different map projections, has a full layer API, full support for mobile, etc. so it's not a direct 1:1 comparison with your project which is implementing a basic mercator raster tile layer. You can also strip Leaflet down to just the raster tile layer stuff and as it doesn't need react or preact or inferno it will be lighter weight than your solution, and still uses the fundamental underlying display mechanism of image tags.
  - mariusandra 8y ago
    If you need support for all that leaflet provides, go for leaflet. If the feature set of pigeon-maps is enough for your needs and you already use react, feel free to go for it instead. I have never claimed it to match the features of Leaflet while being lighter. It's lighter exactly because it doesn't. Offloading a lot of DOM work to React makes it even lighter. Edit: to correct one point, pigeon-maps does support mobile.
    - iamleppert 8y ago
      >> Offloading a lot of DOM work to React makes it even lighter. What exactly does this mean? The only thing that ever changes, as I mentioned, is the src of the image tags in these kinds of tiled maps. How do you get better performance for updating the src attributes in a grid of images of constant size (256x256 tiles or whatever) other than img.src = ''? That's literally the only DOM manipulation being done, there is no "magic". Also you can reduce a lot of your mouse event handling stuff down to a single "reactive" (haha) callback by doing something like this: https://github.com/mikolalysenko/mouse-event https://github.com/mikolalysenko/mouse-event. Instead of binding a bunch of different handlers, the browser's mouse events API is still bizarre after all these years. Should just be a single event that gets sent the state of control input.
      - jonknee 8y ago
        > What exactly does this mean? The only thing that ever changes, as I mentioned, is the src of the image tags in these kinds of tiled maps. What about markers?
  - deleted 8y ago
    [deleted]
  - mikeryan 8y ago
    I think you are looking at this a bit backwards it seems to be a tool used in existing React apps to display maps. Not a tool to display maps that uses React.

mikewhy 8y ago

It's at least 2x that number, if you want to have a nice fade transition. More if you want to buffer the extents. And that's not to mention the things being displayed on the map, like popups, markers, or polygons. Which React's model helps a lot with.

iamleppert 8y ago
You can do that with a CSS transition via a class you apply to the element when you change its src and/or have another layer of tiles that you alternate. I was just pointing out the fact that the only thing ever changes here is the src of the image tags of the tiles, the elements always remain constant. So using React is way overkill for what is essentially a static grid of image tags.
- mariusandra 8y ago
  This library is made for sites that already use React.