I have followed the docs to move the searchcontrol to another div container, but doesnt work.
Html:
<div id="findbox"></div>
Js:
var searchControl = new GeoSearchControl({
provider: provider,
container: 'findbox',
style: 'bar',
});
map.addControl(searchControl);
Do you know how can I move the searchcontrol to findbox's div?
You can do it with append and querySelector:
document.getElementById('findbox').appendChild(
document.querySelector(".geosearch")
);
Note that calling querySelector before map.addControl will return null
Working exemple:
https://jsfiddle.net/7r81up9k/3/
Related
From what I was able to find so far, it seems that the parent map div container must be available before I can instantiate a leafletjs map instance.
Is there a way to get the map instance content without providing the map container id?
My goal is to have something like this, so that I won't have to rely on an onload event to load the map in the page:
function getView() {
return `<div id="testLocations">
<div id="map">
${loadMap()}
</div>
</div>`;
}
function loadMap() {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
return <map html content here>;
}
Any idea?
Thanks
Unfortunately no, it's impossible to initiate the map object before the map container initialized in the DOM.
If you add the map div element before creating the map object it will be ok.
I have been trying to use Ag-Grid with Svelte. I understand that the main problem with using this grid library is that it needs to bind to a dom element that may not exist at the time of the code executing. For example:
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
In this case, the #myGrid element does not exist yet.
I have tried creating an element and then placing it on the HTML part of the Svelte component, like this.
let eGridDiv = document.createElement("DIV");
let gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(eGridDiv, gridOptions);
And then down on the HTML section
<eGridDiv />
However, the new element does not seem to be initialized by Ag-Grid.
So what is the recommended way to use these types of libraries in Svelte?
If you want to use a DOM node in the script part of your component you can use the bind:this={domNode} element binding to get a reference to it, and then use it after the component has been rendered in onMount.
<script>
import { onMount } from 'svelte';
let domNode;
// ...
onMount(() => {
const gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(domNode, gridOptions);
});
</script>
<div bind:this={domNode} />
I would like to add images to my pushpin infoboxes but I am not sure how. I thought maybe htmlContent would do this but then the info box seems to be overwritten.
I really don't want to create a new popout just add images to the existing one. Is this possible?
Use HTML and an img tag, then pass this in as the description value of the infobox. Here is a simple code sample:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var center = map.getCenter();
var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
description: 'Here is my image: <img src="https://www.bingmapsportal.com/Content/images/poi_custom.png" />' });
infobox.setMap(map);
I'm just about to experiment with reactjs I'm new to it. Is reactjs capabile to add a component to existing DOM.
So I have already server-side created DOM and on the flow reactjs should add a component which should render inside body but keep what already is there.
<script type="text/jsx">
var VisualEditor = React.createClass({
render: function() {
return (
<div>Hello, world!</div>
);
}
})
var initVisualEditor = <VisualEditor params={true} />
React.render(initVisualEditor , document.body);
</script>
this one is removing everything inside body and is returning
<div>Hello, world!</div>
React won't add a new div.
The render function is where the component will be rendered and replaces the current code already there.
I recommend you make a div with an id in the template and then render to that in React.render.
Template:
<body><div id="app"></div></body>
React:
React.render(
<Component />,
document.getElementById('app')
)
It's also bad practice to render to the body.
I have some divs that are generated dynamically with content. I add the content id to the class for the div like so:
<div class="div-1"></div>
<div class="div-3"></div>
<div class="div-6"></div>
<div class="div-8"></div>
How do I select the id for a div because I need it as a param to send via ajax. e.g. I need to get the 1 when I click on the 1st div, 3 when I click on 2nd and so on
var id = $(this).attr('class').replace('div-', '');
Or even simple
var id = this.className.replace('div-', '');
Where this points to the dom element you click on inside the click handler.
//Here instead of document it is better to specify a parent container of all divs
$(document).on('click', '[class^="div-"]', function(){
var id = this.className.replace('div-', '');
});
Try this, and remember changing "div" for your selector:
$(document).on("click", "div", function() {
var class_elem = $(this).attr("class").split("-");
var n = class_elem[1]; // This is your number
});
The correct jQuery syntax is:
$("div").click( function() {
var id = $(this).attr('class').replace('div-', '');
});