Develop Reference

Using OpenStreetMap Localy in my React app

I have a React Web application and I have been asked to make an offline map so after I did a lot of research and to find a map that match also the features that the design have I finally found react-leaflet is the best choice for using a map.
But after I finished the installation for the map and the tile layer was using HTTPS to draw the map depending on the lat, lang, and center.
I have been asked one more time to turn off the map into an offline map so I figured out a solution after a little bit of search: which is to select an area on the map from osm (Open Street Map) and download an XML file that contains node tags that are responsible for drawing the map after that I used an application to read that file which is (Maperitive).
I made and export for the map into small tiles layers. Finally, I added the tiles folder to my application as the attached image, and from the component, I used the path to navigate to that tiles folder to load the tiles. But the response is getting for me text/HTML and it should be image/png.
import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "styles/modules/vehicle/map.scss";
const Map: React.FC<any> = () => {
const getIcon = (iconSize) => {
return L.icon({
iconUrl: require("assets/images/png/location.png"),
iconSize,
});
};
return (
<div className="map">
<MapContainer
center={[30.02161, 31.25146]}
zoom={18}
scrollWheelZoom={false}
style={{ width: "100%", height: "100%" }}
>
<TileLayer url='assets/tiles/{z}/{x}/{y}.png' />
<Marker position={[30.02161, 31.25146]} icon={getIcon(60)}>
<Popup>
A pretty CSS3 popup. <br /> customizable.
</Popup>
</Marker>
</MapContainer>
</div>
);
};
export default Map;

Center a MapView on users location

How can I center the MapView on the current user location?
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={region}
style={mapStyle}
onPress={() => Keyboard.dismiss()}
showsUserLocation
region={region}
/>

Read this article, full explanation on how to do it.
How to auto zoom into your current location using React Native Maps

How can I place a marker in React Leaflet?

I am using react leaflet library in my project and attempting to show a marker on my map view by using a Marker component, following this tutorial on Egghead along. However, it doesn't display but a broken image, as follows:
Current view so far
And this is the implementation in my project:
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconUrl: ('./markers/marker.png')
});
// my current implementation
<MapContainer
center={[19.000855082428515, -98.19408389636365]}
zoom={13} >
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
position={[19.000855082428515, -98.19408389636365]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
I´ve also used the icon property of Market set up with this function outside my Component:
const getIcon = () => (
new L.Icon({
iconUrl: require('./markers/marker.png'),
iconSize: [35, 35]
})
);
// code
<Marker
icon={getIcon()}
position={[19.000855082428515, -98.19408389636365]}>
//code
What is the issue that doesn't allow the market to show up? or is there another way to get the marker to show up?

I at last found my way to resolve my issue. Fortunately, this has been answered some years ago on GitHub with the issue #453.
What works for me was removing the import 'leaflet/dist/leaflet.css'; line and replace it in the HTML index file for the link tag specified on their documentation and ta-da, happy in the end 😄

Set Konva transform controls to the top of the canvas

I'm trying to transform an image that sits behind another layer holding a png ( the template ). I want to transform the image below this layer but keep it where it is so the above layer stays as the template.
Is it possible to show the transform controls at the top above everything?
<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
{this.props.file ? (
<Layer>
<Uploaded file={this.props.file} />
<TransformerComponent
selectedShapeName={this.state.selectedShapeName}
/>
</Layer>
) : null}
<Layer listening={false}>
<Overlay />
</Layer>
</Stage>

You need to change the structure of your nodes. Just show transformer on top of all other shapes. If you need to disable events for overlayer, you can use listening={false}.
<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
<Layer>
{this.props.file &&
<Uploaded file={this.props.file} />
}
{/* use listening={false} for image in overlay */}
<Overlay/>
<TransformerComponent
selectedShapeName={this.state.selectedShapeName}
/>
</Stage>

If anyone's looking for a solution using hooks, I found that if you have a ref for the Transformer, you can easily call the zIndex() method with an arbitrarily high number when your shape is selected, then redraw it to be safe (it might work without this part)
useEffect(() => {
if (isSelected) {
trRef.current.zIndex(10000);
trRef.current.getLayer().batchDraw();
}
}, [isSelected]);
This seems to render the Transformer above everything else on the canvas, even if the shape itself is obscured.

react how to make SVG container component to manage drawings in low level components

I start learning React to make visualization application with a large amount of data. Also, this is very first time to create a web-based application. Previously, I also don't have much experience in html, css, javascript, etc.
So far, I could be able to draw something in the following way:
...
<svg width={600} height={600}>
<AnyChart data={data} ... />
<AxisX ... />
<AxisY ... />
</svg>
Here, I want to make a React component called ChartContainer that will create a svg with given width and height. I want to use the ChartContainer component to manage information that can be shared among AnyChart, AxisX and AxisY components in the future. Then, any drawing will go into the svg. Thus, the code may look like this:
...
<ChartContainer width={600} height={600}>
<AnyChart data={data} ... />
<AxisX ... />
<AxisY ... />
</ChartContainer>
...
And, ChartContainer contains only render function as following:
render() {
return (
<svg width={600} height={600}></svg>
);
}
Of course, it didn't show me the correct result. In fact, it didn't draw anything. Can anyone help me to solve this issue? Or any reference or tutorial? I searched but so far couldn't find any simple example.
Thanks.