Hfrhyu

Can I legally use front facing blue light in the UK?

Is a car considered movable or immovable property?

Why did the Germans forbid the possession of pet pigeons in Rostov-on-Don in 1941?

What is the meaning of "of trouble" in the following sentence?

Why is my log file so massive? 22gb. I am running log backups

Finding files for which a command fails

Eliminate empty elements from a list with a specific pattern

Check if two datetimes are between two others

What is the command to reset a PC without deleting any files

What's the difference between repeating elections every few years and repeating a referendum after a few years?

Can a planet have a different gravitational pull depending on its location in orbit around its sun?

Why is the design of haulage companies so “special”?

Information to fellow intern about hiring?

What happens when a metallic dragon and a chromatic dragon mate?

Where to refill my bottle in India?

When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?

Is Social Media Science Fiction?

Patience, young "Padovan"

Could a US political party gain complete control over the government by removing checks & balances?

Crop image to path created in TikZ?

Is domain driven design an anti-SQL pattern?

How can I add custom success page

How to make payment on the internet without leaving a money trail?

Prime joint compound before latex paint?

Placing controls outside map container with Leaflet?

How to put a Leaflet control outside?Placing easyButton outside LeafletHow to create a layer switcher in leafletDisplay a control (zoom bar) outside map container in Leaflet?Make Leaflet Map Background TransparentCustom HTML Within Leaflet MapReset leaflet routing machine route and controlsLeaflet Map not VisibleIs it possible to have a Leaflet control with large images / iconsLeaflet Layer ControlsPlacing easyButton outside LeafletHow to put a Leaflet control outside?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

11

4

Can someone tell me how I can place controls outside of the map content with Leaflet?

In this case, I just want to place the layer switch control outside the map object.

leaflet

share|improve this question

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

add a comment | 

11

4

Can someone tell me how I can place controls outside of the map content with Leaflet?

In this case, I just want to place the layer switch control outside the map object.

leaflet

share|improve this question

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

add a comment | 

Can someone tell me how I can place controls outside of the map content with Leaflet?

In this case, I just want to place the layer switch control outside the map object.

leaflet

share|improve this question

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

share|improve this question

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

share|improve this question

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

edited Mar 25 '16 at 20:01

PolyGeo♦

53.9k1781245

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

asked Mar 22 '16 at 15:16

mauricio santosmauricio santos

162210

1 Answer
1

active

oldest

votes

17

Leaflet does a lot of hand-waving to hide implementation of the map portal but lucky for you they have thought of a solution!

The getContainer function is just what you need.
This returns the actual HTML node, not just the markup.

It is then just as easy as un-childing(?) the node and assign it to a new parent, with a couple lines of Javascript.

Working example and comments (and a kick-ass tileset)!

http://codepen.io/romahicks/pen/ONmPmp

The Code

//Create Layer
var baseMap = new L.TileLayer('http://s.tiles.mapbox.com/v3/gvenech.m13knc8e/z/x/y.png' );

var baseMapIndex = 
 "Map": baseMap
;

// Create the map
var map = new L.map('map', 
 center: new L.LatLng(41.019829, 28.989864),
 zoom: 14,
 maxZoom: 18,
 zoomControl: false, // Disable the default zoom controls.
 layers: baseMap
);

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 
 newParent.appendChild(el);
 
 setParent(htmlObject, a);

You must recursively go through all the children and reassign them to their parent. See the second answer for a simple recursive loop.

https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

share|improve this answer

edited Apr 4 at 4:57

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice work. Already up-voted you, but would you mind adding the relevant JavaScript to your answer?
  
  – elrobis
  Mar 22 '16 at 18:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  a.appendChild(control.onAdd(map)) should be enough. See also stackoverflow.com/questions/36041651/…
  
  – ghybs
  Mar 22 '16 at 19:56
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It worked well with the getContainer solution. But when i tried with the a.appendChild(control.onAdd(map)), all the wms layers and layer control disappear.
  
  – mauricio santos
  Mar 23 '16 at 10:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I update my answer with a recursive loop to get children, sorry. Please let me know if this doesn't work.
  
  – RomaH
  Mar 23 '16 at 12:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mauriciosantos My bad, it does not work as simply for L.control.layers.
  
  – ghybs
  Mar 23 '16 at 16:33
  

  
  
  
  

 | 
show 1 more comment

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f186131%2fplacing-controls-outside-map-container-with-leaflet%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

17

Leaflet does a lot of hand-waving to hide implementation of the map portal but lucky for you they have thought of a solution!

The getContainer function is just what you need.
This returns the actual HTML node, not just the markup.

It is then just as easy as un-childing(?) the node and assign it to a new parent, with a couple lines of Javascript.

Working example and comments (and a kick-ass tileset)!

http://codepen.io/romahicks/pen/ONmPmp

The Code

//Create Layer
var baseMap = new L.TileLayer('http://s.tiles.mapbox.com/v3/gvenech.m13knc8e/z/x/y.png' );

var baseMapIndex = 
 "Map": baseMap
;

// Create the map
var map = new L.map('map', 
 center: new L.LatLng(41.019829, 28.989864),
 zoom: 14,
 maxZoom: 18,
 zoomControl: false, // Disable the default zoom controls.
 layers: baseMap
);

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 
 newParent.appendChild(el);
 
 setParent(htmlObject, a);

You must recursively go through all the children and reassign them to their parent. See the second answer for a simple recursive loop.

https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

share|improve this answer

edited Apr 4 at 4:57

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice work. Already up-voted you, but would you mind adding the relevant JavaScript to your answer?
  
  – elrobis
  Mar 22 '16 at 18:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  a.appendChild(control.onAdd(map)) should be enough. See also stackoverflow.com/questions/36041651/…
  
  – ghybs
  Mar 22 '16 at 19:56
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It worked well with the getContainer solution. But when i tried with the a.appendChild(control.onAdd(map)), all the wms layers and layer control disappear.
  
  – mauricio santos
  Mar 23 '16 at 10:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I update my answer with a recursive loop to get children, sorry. Please let me know if this doesn't work.
  
  – RomaH
  Mar 23 '16 at 12:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mauriciosantos My bad, it does not work as simply for L.control.layers.
  
  – ghybs
  Mar 23 '16 at 16:33
  

  
  
  
  

 | 
show 1 more comment

17

Leaflet does a lot of hand-waving to hide implementation of the map portal but lucky for you they have thought of a solution!

The getContainer function is just what you need.
This returns the actual HTML node, not just the markup.

It is then just as easy as un-childing(?) the node and assign it to a new parent, with a couple lines of Javascript.

Working example and comments (and a kick-ass tileset)!

http://codepen.io/romahicks/pen/ONmPmp

The Code

//Create Layer
var baseMap = new L.TileLayer('http://s.tiles.mapbox.com/v3/gvenech.m13knc8e/z/x/y.png' );

var baseMapIndex = 
 "Map": baseMap
;

// Create the map
var map = new L.map('map', 
 center: new L.LatLng(41.019829, 28.989864),
 zoom: 14,
 maxZoom: 18,
 zoomControl: false, // Disable the default zoom controls.
 layers: baseMap
);

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 
 newParent.appendChild(el);
 
 setParent(htmlObject, a);

You must recursively go through all the children and reassign them to their parent. See the second answer for a simple recursive loop.

https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

share|improve this answer

edited Apr 4 at 4:57

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice work. Already up-voted you, but would you mind adding the relevant JavaScript to your answer?
  
  – elrobis
  Mar 22 '16 at 18:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  a.appendChild(control.onAdd(map)) should be enough. See also stackoverflow.com/questions/36041651/…
  
  – ghybs
  Mar 22 '16 at 19:56
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It worked well with the getContainer solution. But when i tried with the a.appendChild(control.onAdd(map)), all the wms layers and layer control disappear.
  
  – mauricio santos
  Mar 23 '16 at 10:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I update my answer with a recursive loop to get children, sorry. Please let me know if this doesn't work.
  
  – RomaH
  Mar 23 '16 at 12:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mauriciosantos My bad, it does not work as simply for L.control.layers.
  
  – ghybs
  Mar 23 '16 at 16:33
  

  
  
  
  

 | 
show 1 more comment

Leaflet does a lot of hand-waving to hide implementation of the map portal but lucky for you they have thought of a solution!

The getContainer function is just what you need.
This returns the actual HTML node, not just the markup.

It is then just as easy as un-childing(?) the node and assign it to a new parent, with a couple lines of Javascript.

Working example and comments (and a kick-ass tileset)!

http://codepen.io/romahicks/pen/ONmPmp

The Code

//Create Layer
var baseMap = new L.TileLayer('http://s.tiles.mapbox.com/v3/gvenech.m13knc8e/z/x/y.png' );

var baseMapIndex = 
 "Map": baseMap
;

// Create the map
var map = new L.map('map', 
 center: new L.LatLng(41.019829, 28.989864),
 zoom: 14,
 maxZoom: 18,
 zoomControl: false, // Disable the default zoom controls.
 layers: baseMap
);

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 
 newParent.appendChild(el);
 
 setParent(htmlObject, a);

You must recursively go through all the children and reassign them to their parent. See the second answer for a simple recursive loop.

https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

share|improve this answer

edited Apr 4 at 4:57

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814

//Create Layer
var baseMap = new L.TileLayer('http://s.tiles.mapbox.com/v3/gvenech.m13knc8e/z/x/y.png' );

var baseMapIndex = 
 "Map": baseMap
;

// Create the map
var map = new L.map('map', 
 center: new L.LatLng(41.019829, 28.989864),
 zoom: 14,
 maxZoom: 18,
 zoomControl: false, // Disable the default zoom controls.
 layers: baseMap
);

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 
 newParent.appendChild(el);
 
 setParent(htmlObject, a);

share|improve this answer

edited Apr 4 at 4:57

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814

answered Mar 22 '16 at 17:46

RomaHRomaH

1,989814