如何将OSM idEditor嵌入自建的家乡无名街道命名网站？

Hey there! Sounds like you’re building a really meaningful tool for your hometown—helping locals name all those unnamed streets is such a great way to contribute to OpenStreetMap. Embedding the iD Editor into your site is totally feasible, and I’ll break down the steps to make it work, with a focus on keeping that intuitive click-to-edit workflow you love.

1. Get iD Editor’s Built Files #

First, you’ll need the compiled version of iD Editor (you can grab this from its official GitHub repo by downloading the latest release or building it yourself locally). Once you have the files, host them in your website’s directory—you’ll need access to the dist folder which contains CSS, JS, and asset files like icons.

2. Add the Editor to Your Page #

In your website’s HTML, include the iD Editor’s styles and scripts, plus a container where the editor will render:

<!-- iD Editor Styles -->
<link rel="stylesheet" href="/path/to/your/id-editor/dist/css/id.css">

<!-- Container for the editor (adjust height/width as needed) -->
<div id="id-editor" style="width: 100%; height: 90vh; border: 1px solid #ccc;"></div>

<!-- iD Editor Script -->
<script src="/path/to/your/id-editor/dist/js/id.js"></script>

Make sure to replace /path/to/your/id-editor/ with the actual file path where you’re hosting the iD files.

3. Initialize the Editor with Custom Settings #

Next, add a script to initialize iD Editor, tailored to your use case. We’ll set it to focus on your hometown by default, and lean into that click-to-edit street behavior:

document.addEventListener('DOMContentLoaded', function() {
  // Initialize the editor
  const editor = iD.core()
    .assetPath('/path/to/your/id-editor/dist/') // Point to iD's asset folder
    .container('#id-editor');

  // Set default view to your hometown (replace with your area's coordinates and zoom level)
  editor.centerZoom([your_hometown_longitude, your_hometown_latitude], 16);

  // Highlight the name field automatically when a street is clicked
  editor.on('select', function(entity) {
    // Only trigger for street/highway entities
    if (entity.tags.highway) {
      const nameField = editor.ui().fields().get('name');
      if (nameField) {
        nameField.focus(); // Auto-focus the name input
      }
    }
  });

  // Start the editor
  editor.start();
});

4. Set Up OSM Authentication (Critical for Saving Changes) #

To let users submit their street name proposals to OSM, you’ll need to set up OAuth authentication. Here’s how to add it to your initialization script:

// Add this before editor.start()
editor.oauth({
  consumer_key: 'your_osm_consumer_key',
  consumer_secret: 'your_osm_consumer_secret',
  callback_url: 'https://your-website.com/oauth-callback' // Your site's OAuth callback URL
});

You’ll get your consumer key/secret by creating an application on the OpenStreetMap developer portal. This lets users log in with their OSM account to submit edits.

5. Customize for Your Narrow Use Case #

Since your site only focuses on adding street names, you can simplify the editor to remove unnecessary features:

// Disable drawing new roads (we only want to edit existing ones)
editor.ui().toolbar().disable('draw');

// Hide all tag fields except the name field
editor.ui().fields().filter(field => field.key === 'name');

• Test edits on OSM’s test server first to avoid accidentally modifying the live map while you’re building.
• Add a simple guide for users: "Click on an unnamed street in the map, enter the proposed name, then click 'Save' to submit your suggestion to OpenStreetMap."

内容的提问来源于stack exchange，提问作者Aljulanda