Esri JS Bookmark in separate Div

Question

Esri JS Bookmark in separate Div

295 Views Asked by BretW At 04 April 2025 at 13:58

Using the Esri JavaScript API I need to create a number of different bookmarks and access them through the HTML in separate div tags. I created this JS Fiddle in attempt.

I thought that if I defined separate bookmarks and bookmarkitems, it would work. No success yet. I think I am close, missing something simple/.

      var bookmark1 = new esri.dijit.Bookmarks({
      map: map, 
      bookmarks: Bookmark_1

    }, dojo.byId('Bookmark1'));

Original Q&A

There are 1 best solutions below

**dlimos** · Answer 1

I am not sure if I understood you well but.... try this:

script:

   require(['dojo/_base/declare', 'esri/map', "esri/dijit/Bookmarks", 'dijit/Dialog',
  'dijit/layout/BorderContainer', 'dijit/layout/ContentPane'], function (declare, Map, Bookmarks) {
      var map = new Map("map", {
          basemap: "satellite",
          center: [-70.302994, 41.700140],
          zoom: 10
      });

      bookmark = new Bookmarks({
          map: map,
          bookmarks: [],
          editable: true
      }, dojo.byId('bookmarks'));

      var bookmarkPA = {
          "extent": {
              "spatialReference": {
                  "wkid": 102100
              },
              "xmin": -8669334,
              "ymin": 4982379,
              "xmax": -8664724,
              "ymax": 4984864
          },
          "name": "Central Pennsylvania"
      };
      // bookmark.addBookmark(bookmarkCA);
      bookmark.addBookmark(bookmarkPA);

body:

<body>
<div id="leftPane">
    <div id="bookmarks"></div>
</div>

<div id="map"></div></body>

style:

    <style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #map {
        position: fixed;
        top: 0px;
        left: 400px;
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    #leftPane {
        width: 400px;
        height: 100%;
        background-color: gray;
        overflow: scroll;
        border-color: #242222;
        border-width: 2px;
    }
</style>

Esri JS Bookmark in separate Div

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ARCGIS

Related Questions in ARCGIS-JS-API

Trending Questions

Popular # Hahtags

Popular Questions