MapLu

index.html

<header>
  <h1>Lux Map Prototype</h1>
</header>

<main class="container ">
  <div class="row justify-content-md-center">
    <div class="col col-8">
      <div id="map"></div>
    </div>
    <div class="col col-4">
      <div class="bd-highlight point-deatils">
        <div class="card p-2 bd-highlight">
          <h3>Search Details</h3>
          <div id="map-search"></div>
        </div>
        <div class="card p-2 bd-highlight">
          <h3>Point Details</h3>
          <h5>Select a point to edit</h5>
          <div id="info2c"></div>
        </div>
      </div>
    </div>
  </div>
</main>
<footer>
  <h4 id="position"></h4>
</footer>

maplu.markdown

MapLu

A Pen by Oleksandr Yushchak on CodePen.

License.

script.js

var map = new lux.Map({
  target: "map",
  bgLayer: "basemap_2015_global",
  zoom: 14,
  position: [75977, 75099],
  mousePosition: {
    target: "position"
  },
  search: {
    target: "map-search",
    dataSets: ["Adresse", "Coordinates"],
    event: (e) => {
      console.log(e);
    }
  }
});

map.showMarker({
  positioning: "center-center",
  iconURL:
    "https://upload.wikimedia.org/wikipedia/commons/b/b3/Blason_LU_grand-duch%C3%A9_de_Luxembourg.svg",
  html: "<p>...TO DO...</p>",
  click: true,
  target: info2c
});

map.on("singleclick", function (evt) {
  console.log(evt.target);
  alert(evt.target.coordinateToPixelTransform_);
});

// map.on("click", function (evt) {
//   var lonlat = ol.transform(evt.coordinate, "EPSG:3857", "EPSG:4326");
//   var lon = lonlat[0];
//   var lat = lonlat[1];
//   alert("You clicked near lat lon: " + lon.toFixed(6) + "  " + lat.toFixed(6));
// });

// let activePoints = [];

scripts

<script src="https://apiv4.geoportail.lu/apiv4loader.js"></script>

style.css

body {
  font-family: system-ui;
  background: #e6e6e6;
  color: #212529;
  text-align: center;
}

header {
  padding: 20px;
}

main {
  padding-top: 10px;
  padding-bottom: 20px;
}

#map {
  height: 600px;
  widht: 400px;
  box-shadow: 1px 1px 5px 2px #0000006b;
}

.ol-overlay-container.ol-selectable img {
  width: 100px;
}

.point-deatils {
  height: 100%;
  background-color: #0d1ffd0f;
  padding: 10px;
  box-shadow: 1px 1px 5px 2px #0000006b;
  grid-auto-rows: 1fr;
  display: grid;
  grid-row-gap: 10px;
}

#map-search {
  padding: 20px;
}
#map-search .lux-search {
  width: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />