Skip to content

Instantly share code, notes, and snippets.

@coderbit-net

coderbit-net/index.html

Created January 22, 2023 18:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save coderbit-net/e42f9f8fa2e7923057290ef1e0824d2c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save coderbit-net/e42f9f8fa2e7923057290ef1e0824d2c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. coderbit-net created this gist Jan 22, 2023.
    27 changes: 27 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <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>
    7 changes: 7 additions & 0 deletions maplu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    MapLu
    -----


    A [Pen](https://codepen.io/coderbit-net/pen/KKBZzVq) by [Oleksandr Yushchak](https://codepen.io/coderbit-net) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/KKBZzVq).
    39 changes: 39 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    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 = [];
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://apiv4.geoportail.lu/apiv4loader.js"></script>
    42 changes: 42 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    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%;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />