Esri Map - Add Location

by schlomm

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<div id="map" class="map">
  <div id="HomeButton"></div>
</div>
<script src="https://js.arcgis.com/3.16/"></script>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  height: 100%;
}

#HomeButton {
  position: absolute;
  top: 95px;
  left: 20px;
  z-index: 50;
}

JavaScript

require([
  "esri/map",
  "esri/layers/FeatureLayer",
  "esri/layers/VectorTileLayer",
  "esri/dijit/HomeButton",
  "esri/arcgis/utils",
  "esri/dijit/Popup",
  "esri/dijit/PopupTemplate",
  "esri/symbols/SimpleFillSymbol",
  "esri/Color",
  "dojo/dom-class",
  "dojo/dom-construct",
  "dojo/on",
  "dojo/domReady!"
], function(
  Map,
  FeatureLayer,
  VectorTileLayer,
  HomeButton,
  arcgisutils,
  Popup,
  PopupTemplate,
  SimpleFillSymbol,
  Color,
  domClass,
  domConstruct,
  on
) {

  //The popup is the default info window so you only need to create the popup and 
  //assign it to the map if you want to change default properties. Here we are 
  //noting that the specified title content should display in the header bar 
  //and providing our own selection symbol for polygons.
  // http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=popup_chart
  var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
  var popup = new Popup({
    fillSymbol: fill,
    titleInBody: false
  }, domConstruct.create("div"));
  //Add the dark theme which is customized further in the <style> tag at the top of this page
  domClass.add(popup.domNode, "light");


  var map = new Map("map", {
    center: [7.621883, 51.958273],
    zoom: 14,
    basemap: "gray",
    infoWindow: popup
  });

  var home = new HomeButton({
    map: map
  }, "HomeButton");
  home.startup();

  var homeButtonEvent = on(home, 'home', function() {
    console.log("Home was pressed")
  });


  var template = new PopupTemplate({
    title: "<b>{title} ({category})</b>",
    description: "<b>Beschreibung:</b> {description} <br>"+
    "<b>Startdatum: </b>{startDate}<br/>"+
    "<b>Enddatum: </b>{endDate}<br/>"+
    "<b>Adresse: </b>{address}<br/>"+
    "<b id='linkText'>Weitere Informationen:<a href='{link}'>Webseite öffnen</a></b><br>"+
    "<b>Kontakt: </b>{kontakt}"});

  var geoFenceLayer = new...