how to rewrite leaflet code to react leaflet
-1
need help with rewrite code of pure js leaflet to react leaflet.
I want to see this Overlay in react-leaflet Overlay
I think i can do it with refs, but didnt find "getTileUrl" function :(
createLayer () {
const { map } = this.props.leaflet;
L.TileLayer.Rosreestr = L.TileLayer.extend({
options: {
tileSize: 1024,
},
getTileUrl: function (tilePoint) {
var map = this._map,
crs = map.options.crs,
tileSize = 1024,
nwPoint = tilePoint.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]);
var nw = crs.project(map.unproject(nwPoint, tilePoint.z)),
se = crs.project(map.unproject(sePoint, tilePoint.z)),
bbox = [nw.x, se.y, se.x, nw.y].join(',');
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
bbox: bbox
}));
}
});
L.tileLayer.rosreestr = function() {
return new L.TileLayer.Rosreestr("https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image");
}
L.control.layers(null, {REESTR: L.tileLayer.rosreestr({},{ minZoom: 2, maxZoom: 18}) },{collapsed: false}).addTo(map);}
Want put code in THIS:
<Overlay checked name="REESTR" >
<TileLayer
ref={(ref) => { this.tile = ref }}
attribution="REESTR"
url="https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image">
</TileLayer>
</Overlay>
react-leaflet
asked 2 days ago
Alexey Menog
12
add a comment |
-1
need help with rewrite code of pure js leaflet to react leaflet.
I want to see this Overlay in react-leaflet Overlay
I think i can do it with refs, but didnt find "getTileUrl" function :(
createLayer () {
const { map } = this.props.leaflet;
L.TileLayer.Rosreestr = L.TileLayer.extend({
options: {
tileSize: 1024,
},
getTileUrl: function (tilePoint) {
var map = this._map,
crs = map.options.crs,
tileSize = 1024,
nwPoint = tilePoint.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]);
var nw = crs.project(map.unproject(nwPoint, tilePoint.z)),
se = crs.project(map.unproject(sePoint, tilePoint.z)),
bbox = [nw.x, se.y, se.x, nw.y].join(',');
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
bbox: bbox
}));
}
});
L.tileLayer.rosreestr = function() {
return new L.TileLayer.Rosreestr("https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image");
}
L.control.layers(null, {REESTR: L.tileLayer.rosreestr({},{ minZoom: 2, maxZoom: 18}) },{collapsed: false}).addTo(map);}
Want put code in THIS:
<Overlay checked name="REESTR" >
<TileLayer
ref={(ref) => { this.tile = ref }}
attribution="REESTR"
url="https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image">
</TileLayer>
</Overlay>
react-leaflet
asked 2 days ago
Alexey Menog
12
Can you explain a bit what are you trying to achieve? It is difficult to get a solid answer when you ask 'how to rewrite leaflet code to react-leaflet'. What is the behavior you would like to achieve? You want to switch between the overlay you attach (reestr) and which other overlay or tile provider or whatever or only having this one? And why are you extending TileLayer? Do you want to apply a specific custom behavior?
– kboul
yesterday
add a comment |
-1
-1
-1
1
need help with rewrite code of pure js leaflet to react leaflet.
I want to see this Overlay in react-leaflet Overlay
I think i can do it with refs, but didnt find "getTileUrl" function :(
createLayer () {
const { map } = this.props.leaflet;
L.TileLayer.Rosreestr = L.TileLayer.extend({
options: {
tileSize: 1024,
},
getTileUrl: function (tilePoint) {
var map = this._map,
crs = map.options.crs,
tileSize = 1024,
nwPoint = tilePoint.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]);
var nw = crs.project(map.unproject(nwPoint, tilePoint.z)),
se = crs.project(map.unproject(sePoint, tilePoint.z)),
bbox = [nw.x, se.y, se.x, nw.y].join(',');
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
bbox: bbox
}));
}
});
L.tileLayer.rosreestr = function() {
return new L.TileLayer.Rosreestr("https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image");
}
L.control.layers(null, {REESTR: L.tileLayer.rosreestr({},{ minZoom: 2, maxZoom: 18}) },{collapsed: false}).addTo(map);}
Want put code in THIS:
<Overlay checked name="REESTR" >
<TileLayer
ref={(ref) => { this.tile = ref }}
attribution="REESTR"
url="https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image">
</TileLayer>
</Overlay>
react-leaflet
asked 2 days ago
Alexey Menog
12
need help with rewrite code of pure js leaflet to react leaflet.
I want to see this Overlay in react-leaflet Overlay
I think i can do it with refs, but didnt find "getTileUrl" function :(
createLayer () {
const { map } = this.props.leaflet;
L.TileLayer.Rosreestr = L.TileLayer.extend({
options: {
tileSize: 1024,
},
getTileUrl: function (tilePoint) {
var map = this._map,
crs = map.options.crs,
tileSize = 1024,
nwPoint = tilePoint.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]);
var nw = crs.project(map.unproject(nwPoint, tilePoint.z)),
se = crs.project(map.unproject(sePoint, tilePoint.z)),
bbox = [nw.x, se.y, se.x, nw.y].join(',');
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
bbox: bbox
}));
}
});
L.tileLayer.rosreestr = function() {
return new L.TileLayer.Rosreestr("https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image");
}
L.control.layers(null, {REESTR: L.tileLayer.rosreestr({},{ minZoom: 2, maxZoom: 18}) },{collapsed: false}).addTo(map);}
Want put code in THIS:
<Overlay checked name="REESTR" >
<TileLayer
ref={(ref) => { this.tile = ref }}
attribution="REESTR"
url="https://pkk5.rosreestr.ru/arcgis/rest/services/Cadastre/Cadastre/MapServer/export?layers=show&dpi=96&format=PNG32&bbox=${bbox}&size=1024%2C1024&transparent=true&f=image">
</TileLayer>
</Overlay>
react-leaflet
react-leaflet
asked 2 days ago
Alexey Menog
12
asked 2 days ago
Alexey Menog
12
edited 2 days ago
asked 2 days ago
Alexey Menog
12
asked 2 days ago
Alexey Menog
12
asked 2 days ago
Alexey Menog
12
12
Can you explain a bit what are you trying to achieve? It is difficult to get a solid answer when you ask 'how to rewrite leaflet code to react-leaflet'. What is the behavior you would like to achieve? You want to switch between the overlay you attach (reestr) and which other overlay or tile provider or whatever or only having this one? And why are you extending TileLayer? Do you want to apply a specific custom behavior?
– kboul
yesterday
add a comment |
Can you explain a bit what are you trying to achieve? It is difficult to get a solid answer when you ask 'how to rewrite leaflet code to react-leaflet'. What is the behavior you would like to achieve? You want to switch between the overlay you attach (reestr) and which other overlay or tile provider or whatever or only having this one? And why are you extending TileLayer? Do you want to apply a specific custom behavior?
– kboul
yesterday
Can you explain a bit what are you trying to achieve? It is difficult to get a solid answer when you ask 'how to rewrite leaflet code to react-leaflet'. What is the behavior you would like to achieve? You want to switch between the overlay you attach (reestr) and which other overlay or tile provider or whatever or only having this one? And why are you extending TileLayer? Do you want to apply a specific custom behavior?
– kboul
yesterday
Can you explain a bit what are you trying to achieve? It is difficult to get a solid answer when you ask 'how to rewrite leaflet code to react-leaflet'. What is the behavior you would like to achieve? You want to switch between the overlay you attach (reestr) and which other overlay or tile provider or whatever or only having this one? And why are you extending TileLayer? Do you want to apply a specific custom behavior?
– kboul
yesterday
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53945320%2fhow-to-rewrite-leaflet-code-to-react-leaflet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53945320%2fhow-to-rewrite-leaflet-code-to-react-leaflet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you explain a bit what are you trying to achieve? It is difficult to get a solid answer when you ask 'how to rewrite leaflet code to react-leaflet'. What is the behavior you would like to achieve? You want to switch between the overlay you attach (reestr) and which other overlay or tile provider or whatever or only having this one? And why are you extending TileLayer? Do you want to apply a specific custom behavior?
– kboul
yesterday