Mixing
How do i provide an anchor to an html element used as an icon? - Leaflet JS
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm setting up a map application that dynamically loads markers from a database and shows them on a map, each marker has a custom icon that is displayed using the "html" option inside the L.Divicon object. How do i set the anchor of the icon, as the icon is not an image file, but an HTML element within a Bootstrap circle div? (I need to create the icon this way due to other reasons)
I've tried setting the iconsize/iconanchor options the same way i would do for an icon image. But the zooming in and out of the map changes the location of the marker.
var markers = ;
var image = 'https://upload.wikimedia.org/wikipedia/commons/b/bf/Inveraray_Castle_-_south-west_facade.jpg';
var image2 = 'https://mfas3.s3.amazonaws.com/styles/grid-3_thumbnail_retina/s3/wickermansfw.jpg?itok=UH3cbzhO';
var marker1 = L.marker([57.444051,-2.794932], {
icon: L.divIcon({
html: '<i class="far fa-hammer fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image:image2,
title: 'Huntly Toon',
type: 'Yard'
} // Add a title
)
var marker = L.marker([57.140956, -2.119276], {
icon: L.divIcon({
html: '<i class="far fa-flask fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image: image,
title: 'Jamies Flat',
type: 'Lab'
} // Add a title // Adjust the opacity
)
marker.bindPopup(createPopupContent(marker),customOptions).addTo(map).on('click', showInfo);
marker1.bindPopup(createPopupContent(marker1),customOptions).addTo(map).on('click', showInfo);
L.DomUtil.addClass(marker._icon, 'img-circle fa-stack marker');
L.DomUtil.addClass(marker1._icon, 'img-circle fa-stack marker');
As the icon is rendered to the page as a 60x60 element, i expected the code to work with the icon anchor and popup anchor. But as stated, the icon moves around the map without anything anchoring it.
javascript leaflet mapping
asked Jan 3 at 10:19
Jamie LawJamie Law
34
add a comment |
I'm setting up a map application that dynamically loads markers from a database and shows them on a map, each marker has a custom icon that is displayed using the "html" option inside the L.Divicon object. How do i set the anchor of the icon, as the icon is not an image file, but an HTML element within a Bootstrap circle div? (I need to create the icon this way due to other reasons)
I've tried setting the iconsize/iconanchor options the same way i would do for an icon image. But the zooming in and out of the map changes the location of the marker.
var markers = ;
var image = 'https://upload.wikimedia.org/wikipedia/commons/b/bf/Inveraray_Castle_-_south-west_facade.jpg';
var image2 = 'https://mfas3.s3.amazonaws.com/styles/grid-3_thumbnail_retina/s3/wickermansfw.jpg?itok=UH3cbzhO';
var marker1 = L.marker([57.444051,-2.794932], {
icon: L.divIcon({
html: '<i class="far fa-hammer fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image:image2,
title: 'Huntly Toon',
type: 'Yard'
} // Add a title
)
var marker = L.marker([57.140956, -2.119276], {
icon: L.divIcon({
html: '<i class="far fa-flask fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image: image,
title: 'Jamies Flat',
type: 'Lab'
} // Add a title // Adjust the opacity
)
marker.bindPopup(createPopupContent(marker),customOptions).addTo(map).on('click', showInfo);
marker1.bindPopup(createPopupContent(marker1),customOptions).addTo(map).on('click', showInfo);
L.DomUtil.addClass(marker._icon, 'img-circle fa-stack marker');
L.DomUtil.addClass(marker1._icon, 'img-circle fa-stack marker');
As the icon is rendered to the page as a 60x60 element, i expected the code to work with the icon anchor and popup anchor. But as stated, the icon moves around the map without anything anchoring it.
javascript leaflet mapping
asked Jan 3 at 10:19
Jamie LawJamie Law
34
add a comment |
I'm setting up a map application that dynamically loads markers from a database and shows them on a map, each marker has a custom icon that is displayed using the "html" option inside the L.Divicon object. How do i set the anchor of the icon, as the icon is not an image file, but an HTML element within a Bootstrap circle div? (I need to create the icon this way due to other reasons)
I've tried setting the iconsize/iconanchor options the same way i would do for an icon image. But the zooming in and out of the map changes the location of the marker.
var markers = ;
var image = 'https://upload.wikimedia.org/wikipedia/commons/b/bf/Inveraray_Castle_-_south-west_facade.jpg';
var image2 = 'https://mfas3.s3.amazonaws.com/styles/grid-3_thumbnail_retina/s3/wickermansfw.jpg?itok=UH3cbzhO';
var marker1 = L.marker([57.444051,-2.794932], {
icon: L.divIcon({
html: '<i class="far fa-hammer fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image:image2,
title: 'Huntly Toon',
type: 'Yard'
} // Add a title
)
var marker = L.marker([57.140956, -2.119276], {
icon: L.divIcon({
html: '<i class="far fa-flask fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image: image,
title: 'Jamies Flat',
type: 'Lab'
} // Add a title // Adjust the opacity
)
marker.bindPopup(createPopupContent(marker),customOptions).addTo(map).on('click', showInfo);
marker1.bindPopup(createPopupContent(marker1),customOptions).addTo(map).on('click', showInfo);
L.DomUtil.addClass(marker._icon, 'img-circle fa-stack marker');
L.DomUtil.addClass(marker1._icon, 'img-circle fa-stack marker');
As the icon is rendered to the page as a 60x60 element, i expected the code to work with the icon anchor and popup anchor. But as stated, the icon moves around the map without anything anchoring it.
javascript leaflet mapping
asked Jan 3 at 10:19
Jamie LawJamie Law
34
I'm setting up a map application that dynamically loads markers from a database and shows them on a map, each marker has a custom icon that is displayed using the "html" option inside the L.Divicon object. How do i set the anchor of the icon, as the icon is not an image file, but an HTML element within a Bootstrap circle div? (I need to create the icon this way due to other reasons)
I've tried setting the iconsize/iconanchor options the same way i would do for an icon image. But the zooming in and out of the map changes the location of the marker.
var markers = ;
var image = 'https://upload.wikimedia.org/wikipedia/commons/b/bf/Inveraray_Castle_-_south-west_facade.jpg';
var image2 = 'https://mfas3.s3.amazonaws.com/styles/grid-3_thumbnail_retina/s3/wickermansfw.jpg?itok=UH3cbzhO';
var marker1 = L.marker([57.444051,-2.794932], {
icon: L.divIcon({
html: '<i class="far fa-hammer fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image:image2,
title: 'Huntly Toon',
type: 'Yard'
} // Add a title
)
var marker = L.marker([57.140956, -2.119276], {
icon: L.divIcon({
html: '<i class="far fa-flask fa-3x"></i>',
iconSize: [60, 60], // size of the icon
iconAnchor: [30, 60], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50], // point from which the popup should open relative to the iconAnchor
className: 'myDivIcon'
}),
image: image,
title: 'Jamies Flat',
type: 'Lab'
} // Add a title // Adjust the opacity
)
marker.bindPopup(createPopupContent(marker),customOptions).addTo(map).on('click', showInfo);
marker1.bindPopup(createPopupContent(marker1),customOptions).addTo(map).on('click', showInfo);
L.DomUtil.addClass(marker._icon, 'img-circle fa-stack marker');
L.DomUtil.addClass(marker1._icon, 'img-circle fa-stack marker');
As the icon is rendered to the page as a 60x60 element, i expected the code to work with the icon anchor and popup anchor. But as stated, the icon moves around the map without anything anchoring it.
javascript leaflet mapping
javascript leaflet mapping
asked Jan 3 at 10:19
Jamie LawJamie Law
34
asked Jan 3 at 10:19
Jamie LawJamie Law
34
asked Jan 3 at 10:19
Jamie LawJamie Law
34
asked Jan 3 at 10:19
Jamie LawJamie Law
34
asked Jan 3 at 10:19
Jamie LawJamie Law
34
34
add a comment |
add a comment |
0
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
});
}
});
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%2f54020292%2fhow-do-i-provide-an-anchor-to-an-html-element-used-as-an-icon-leaflet-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f54020292%2fhow-do-i-provide-an-anchor-to-an-html-element-used-as-an-icon-leaflet-js%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
